广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vue 代码压缩优化方式
  • 563
分享到

vue 代码压缩优化方式

2024-04-02 19:04:59 563人浏览 薄情痞子
摘要

目录Vue代码压缩优化设置productionSourceMap为false代码压缩图片资源压缩开启gzip压缩vuecli3代码压缩混淆现将混淆流程记录如下vue代码压缩优化 设置

vue代码压缩优化

设置productionSourceMap为false

如果不需要生产环境的 source map,可以将其设置为 false 以加速生产环境构建。

设置为false打包时候不会出现.map文件

module.exports = {
    productionSourceMap: false
}

代码压缩

安装uglifyjs-webpack-plugin插件,可以去除项目中console.log和debugger 

npm install uglifyjs-WEBpack-plugin --save
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
// 生产环境相关配置
if (isProduction) {
    // 代码压缩
    config.plugins.push(
        new UglifyJsPlugin({
            uglifyOptions: {
                //生产环境去除console等信息
                compress: {
                    warnings: false, // 若打包错误,则注释这行
                    drop_debugger: true,//是否移除debugger
                    drop_console: true,
                    pure_funcs: ['console.log']//移除console
                }
            },
            sourceMap: false,
            parallel: true
        })
    )
}

图片资源压缩

 安装 image-webpack-loader 插件,可以将大图片进行压缩从而缩小打包体积 

npm install image-webpack-loader --save
    chainWebpack: config => {
        // ============压缩图片 start============
        config.module
            .rule('images')
            .use('image-webpack-loader')
            .loader('image-webpack-loader')
            .options({ bypassOnDebug: true })
            .end()
        // ============压缩图片 end============
    }

开启gzip压缩

开启gzip压缩,可以优化Http请求,提高加载速度 

npm install compression-webpack-plugin --save-dev
const CompressionPlugin = require("compression-webpack-plugin");
// 开启gzip压缩
config.plugins.push(new CompressionPlugin({
    alGorithm: 'gzip',
    test: new RegExp("\\.(" + ["js", "CSS"].join("|") + ")$"), // 匹配文件扩展名
    // threshold: 10240, // 对超过10k的数据进行压缩
    threshold: 5120, // 对超过5k的数据进行压缩
    minRatio: 0.8,
    cache: true, // 是否需要缓存
    deleteOriginalAssets:false  // true删除源文件(不建议);false不删除源文件
 }))

vuecli3代码压缩混淆

最近被某大公司大佬虐了,要求混淆用vuecli3写的代码(啥敏感信息都没有,混淆个什么混淆...)

现将混淆流程记录如下

1、安装 “uglifyjs-webpack-plugin”

cnpm i --save uglifyjs-webpack-plugin

没有安装cnpm的同学可以用npm

2、在项目根目录下创建一个名为 vue.config.js的文件

3、在vue.config.js中引入uglifyjs-webpack-plugin

const UglifyPlugin = require('uglifyjs-webpack-plugin')

4、在vue.config.js中配置uglifyjs-webpack-plugin

module.exports = {
  configureWebpack: (config) => {
    if (process.env.node_ENV == 'production') {
      // 为生产环境修改配置
      config.mode = 'production'
      // 将每个依赖包打包成单独的js文件
      let optimization = {
        minimizer: [new UglifyPlugin({
            uglifyOptions: {
                warnings: false,
                compress: {
                  drop_console: true, 
                  drop_debugger: false,
                  pure_funcs: ['console.log'] 
                }
            }
         })]
      }
      Object.assign(config, {
        optimization
      })
    } else {
      // 为开发环境修改配置
      config.mode = 'development'
    }
  }
};

这就可以了,接下来大家可以打包试试了

cnpm run build

如果报错的话,估计是uglifyjs-webpack-plugin版本又更新了,可能需要修改配置中的 “minimizer”节点,官方文档地址:https://www.npmjs.com/package/uglifyjs-webpack-plugin

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

--结束END--

本文标题: vue 代码压缩优化方式

本文链接: https://www.lsjlt.com/news/144183.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • vue 代码压缩优化方式
    目录vue代码压缩优化设置productionSourceMap为false代码压缩图片资源压缩开启gzip压缩vuecli3代码压缩混淆现将混淆流程记录如下vue代码压缩优化 设置...
    99+
    2022-11-13
  • vue代码压缩优化方式有哪些
    小编给大家分享一下vue代码压缩优化方式有哪些,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!vue代码压缩优化设置productionSourceMap为false如果不需要生产环境的 source map,可以将其设置为...
    99+
    2023-06-29
  • CSS压缩与CSS代码压缩还原的方法
    本文小编为大家详细介绍“CSS压缩与CSS代码压缩还原的方法”,内容详细,步骤清晰,细节处理妥当,希望这篇“CSS压缩与CSS代码压缩还原的方法”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学...
    99+
    2022-10-19
  • 如何使用php函数来压缩和优化代码?
    在开发Web应用程序时,代码的大小和效率是非常重要的。代码的大小直接影响文件的加载速度,而代码的效率则直接影响应用程序的响应时间。为了提高应用程序的性能,我们经常需要对代码进行压缩和优化。在PHP中,有一些内置的函数和方法可以帮助我们压缩和...
    99+
    2023-10-21
    性能优化 压缩代码:代码压缩 代码压缩工具 代码压缩技术 优化代码:代码优化
  • JS前端图片最优化压缩方案
    目录前言压缩图片思考压缩图片基本流程准备HTMLCanvasElement.toDataURL()语法参数猜想实践结论附录优化升级优化升级 TS新写法前言 上传图片/视频/文件是我们...
    99+
    2022-11-13
  • java中zip压缩乱码解决方法(附代码)
    用java来打包文件生成压缩文件,有两个地方会出现乱码(推荐:java基础教程)内容的中文乱码问题,这个问题网上很多人给出了解决方法,两种:修改sun的源码;使用开源的类库org.apache.tools.zip.ZipOutputStre...
    99+
    2020-12-29
    java
  • vue-cli3打包时图片压缩处理方式
    目录vue-cli3打包时图片压缩例如代码如下vue-cli3压缩图片配置安装image-webpack-loader插件在vue.config.js当中进行配置vue-cli3打包...
    99+
    2022-11-13
  • linux下数据压缩的几种方法与查看方式(示例代码)
    1,tar命令 使用tar程序打出来的包我们常称为tar包,tar包文件的命令通常都是以.tar结尾的。生成tar包后,就可以用其它的程序来进行压缩了,tar命令本身不进行数据压缩,但可以在打包或解包的同时调用其它的压缩...
    99+
    2022-06-04
    linux 数据压缩 linux 数据查看
  • Nginx性能优化之Gzip压缩的设置方法
    本篇内容主要讲解“Nginx性能优化之Gzip压缩的设置方法”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Nginx性能优化之Gzip压缩的设置方法”吧!Nginx开启Gzip压缩功能,&nbs...
    99+
    2023-06-29
  • Webpack构建代码质量压缩的方法是什么
    这篇文章主要介绍“Webpack构建代码质量压缩的方法是什么”,在日常操作中,相信很多人在Webpack构建代码质量压缩的方法是什么问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解...
    99+
    2022-10-19
  • Vue项目打包、合并及压缩优化网页响应速度的方法
    这篇文章主要介绍“Vue项目打包、合并及压缩优化网页响应速度的方法”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“Vue项目打包、合并及压缩优化网页响应速度的方法”文...
    99+
    2022-10-19
  • Vue项目打包、合并及压缩优化网页响应速度
    目录前言一.请求内容太大 解决方案:CDN引入压缩请求资源一.http请求次数太多 解决方案:总结前言 影响网页响应速度的因素有很多,例如:请求内容太大、http请求次数太多、服务器...
    99+
    2022-11-12
  • java开发代码的性能优化方式
    本篇内容主要讲解“java开发代码的性能优化方式”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“java开发代码的性能优化方式”吧!  代码优化的目标:  减小代码体积  提高整个系统的运行效率 ...
    99+
    2023-06-02
  • Android性能优化之图片大小,尺寸压缩的方法
    这篇文章主要介绍“Android性能优化之图片大小,尺寸压缩的方法”,在日常操作中,相信很多人在Android性能优化之图片大小,尺寸压缩的方法问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Android性能...
    99+
    2023-06-30
  • 你所未知的3种Node.js代码优化方式
    Node.js 程序的运行可能会受 CPU 或输入输出操作的限制而十分缓慢。从 CPU 角度看,程序运行缓慢的典型原因之一就是未经优化的「热点路径」(一段经常被访问的代码)。从输入输出角度看,程序运行速度的...
    99+
    2022-06-04
    你所 代码 方式
  • MS SQL SERVER 数据库日志压缩方法与代码是怎样的
    MS SQL SERVER 数据库日志压缩方法与代码是怎样的,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。MSSQL性能是很不错的,但是数据库...
    99+
    2022-10-19
  • vue中怎么格式化HTML代码
    本篇内容主要讲解“vue中怎么格式化HTML代码”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“vue中怎么格式化HTML代码”吧! 问题:一般用Shift+A...
    99+
    2022-10-19
  • 缩减SCSS 50%样式代码的方法有哪些
    本篇内容主要讲解“缩减SCSS 50%样式代码的方法有哪些”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“缩减SCSS 50%样式代码的方法有哪些”吧!前言Sass是CSS3语言的扩展,它能帮你更...
    99+
    2023-06-27
  • Android性能优化之图片大小,尺寸压缩综合解决方案
    目录前言常见的图片压缩方法质量压缩尺寸压缩libjpeg图片压缩流程总结前言 在Android中我们经常会遇到图片压缩的场景,比如给服务端上传图片,包括个人信息的用户头像,有时候人脸...
    99+
    2022-11-13
  • Flex Builder 3代码格式化方
    Flex Builder的最新版本已经到了4.5,可是代码格式化工具并没有集成在安装版本中,需要通过其他途径来实现。 下面提供一个安装插件的方法实现Flex代码格式化:      1. 点击菜单中的 Help-> Software ...
    99+
    2023-01-31
    代码 Flex Builder
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作