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
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值