vue项目打包优化技巧合集

最新推荐文章于 2025-05-20 22:52:15 发布

爬到树上看月亮

最新推荐文章于 2025-05-20 22:52:15 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

文章标签： vue webpack

本文链接：https://blog.csdn.net/qq_41702466/article/details/124109059

本文介绍了如何使用UglifyJsPlugin插件进行Webpack配置，以优化生产环境的代码，包括关闭sourceMap、删除console和debugger语句，并利用pure_funcs选项进一步压缩代码。在生产模式下，建议关闭sourceMap以提高压缩效率，同时通过drop_debugger和drop_console移除无用的console和debugger。此外，通过pure_funcs可以指定不产生副作用的函数，以进一步优化代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、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
    			}
    		}))
			
    	}
    },

}