vue项目打包优化技巧合集

一、uglifyJsPlugin插件

优化内容

• sourceMap：是否将压缩后的代码生产对应的Source Map，目的是为了内部开发人员吊事先上代码时用的，相当于日志，所以为了有更好的压缩效果，在生产模式下还是关闭比较好
• drop_console：是否剔除代码中所有的console语句，默认不剔除。
• drop_debugger：是否剔除debugger
• pure_funcs：用官方的话说：你可以传递一个名称数组，UglifyJS 会假设这些函数没有作用。这些没有作用的将会被剔除。（你可以传递一个名称数组，UglifyJS 会假设这些函数不会产生作用。值得注意的是：不会检查名称是否在范围内重新定义。例如这里的一个例子var q = Math.floor(a/b)。如果变量q没有在其他地方使用，UglifyJS 会删除它，但仍然会保留Math.floor(a/b)，不知道它做了什么。你可以通过pure_funcs: [ ‘Math.floor’ ]让它知道这个函数不会产生任何作用，在这种情况下，整个语句将被丢弃。当前的实现增加了一些开销（压缩会更慢）。）

安装插件

npm install uglifyjs-webpack-plugin -save-dev

配置vue.config.js

//引入插件
const UglifyJsPlugin=require("uglifyjs-webpack-plugin")
//判断是否是生产环境
const isProduction=process.env.NODE_ENV;
module.exports={
	configureWebpack: config=>{
    	//生产环境相关配置
    	if(isProduction=="production"){
    		//将插件添加在最终webpack插件里
    		config.plugins.push(new UglifyJsPlugin({
    			uglifyOptions:{
    				//生产环境自动删除 console、debugger等语句
    				compress:{
    					drop_debugger:true,
    					drop_console:true,
    					pure_funcs:["console.log"]
    				},
    				//不去生产日志
    				sourceMap:false
    			}
    		}))
			
    	}
    },

}

参考

[1] uglifyjs-webpack-plugin
[2] uglifyOptions选项参数
[3]Compress options定义压缩选项