Vue——项目打包优化

最新推荐文章于 2025-06-06 10:58:09 发布

贝塔贝卡贝

最新推荐文章于 2025-06-06 10:58:09 发布

阅读量403

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js webpack

本文链接：https://blog.youkuaiyun.com/Kiruthika/article/details/125131531

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	
				})
			)
		}
	}
}