Vue——项目打包优化

vue项目打包出来的文件有点大,如何将其优化呢
UglifyJS Webpack Plugin插件用来缩小(压缩优化)js文件

1、安装uglifyjs-webpack-plugin

npm i uglifyjs-webpack-plugin --save-dev

2、在vue.config.js文件中配置

const UglifyJsPlugin = require('uglifyhjs-webpack-plugin');
let isProduction = process.env.NODE_ENV;

module.exports = {
	//....
	configureWebpack:config => {
		//生产环境相关配置
		if(isProduction == 'production'){
			//代码压缩
			config.plugins.push(
				new UglifyJsPlugin({
					uglifyOptions:{
						//生产环境自动删除console
						warnings:false,
						compress:{
							//warnings:false,//若打包错误,则注释这行
							drop_debugger:true,
							drop_console:true,
							pure_funcs:['console.log']
						}
					},
					sourceMap:false,
					parallel:true	
				})
			)
		}
	}
}

3、配置完成后,再执行npm run build打包

npm run build

你可能感兴趣的:(vue.js,webpack)