vue 代码压缩优化方式
目录
- vue代码压缩优化
- 设置productionSourceMap为false
- 代码压缩
- 图片资源压缩
- 开启gzip压缩
- vuecli3代码压缩混淆
- 现将混淆流程记录如下
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
以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。
赞 (0)