vue.config.js配置gZip压缩和去掉 console.log

最新推荐文章于 2025-08-01 23:13:51 发布

原创最新推荐文章于 2025-08-01 23:13:51 发布 · 407 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #webpack

本文介绍了如何在Vue项目中配置gZip压缩，以减小文件体积，提高加载速度。同时，文章也提及了由于compression-webpack-plugin最新版本7.1.1存在错误，需要降级使用。在配置完成后，不仅要在vue.config.js中进行设置，还须在服务器端，如nginx.conf文件中启用gzip_static选项。此外，还提到了去除console.log的实践，以优化生产环境的代码。

安装，目前compression-webpack-plugin最新7.1.1会报错，所以降版本。

npm install compression-webpack-plugin@6.1.1 -D
npm install uglifyjs-webpack-plugin -D

在vue.config.js中配置

const CompressionPlugin = require('compression-webpack-plugin');    // 开启zip压缩
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')   // 去掉注释

module.exports = {
    publicPath: './',      // 打包后的基本路径，默认'/'，部署应用包时的基本 URL
    productionSourceMap: false, // 打包不生成map文件
    devServer: {
        port: 8090,         // 端口号
        open: true,         // 自动打开
        proxy: {
            '/api': {
                target: "http://192.168.2.49:8090",     // 本地调试接口, 本机localhost：xxx
                changeOrigin: true,
                pathRewrite: {
                    "^/api": "/"
                }
            }
        }
    },
    configureWebpack: config => {
		if(process.env.NODE_ENV === 'production') {	// 判断是否生产环境的
			return {
				plugins: [
					new CompressionPlugin({
						test: /\.js$|\.html$|\.css$/,
						threshold: 10240,	// 超过10K就压缩
						deleteOriginalAssets: true		// false保留源文件（.js）
					}),

                    new UglifyJsPlugin({
                        uglifyOptions: {
                            compress: {
                                //warnings: false, 注释不然打包会报错如图下图
                                drop_console: true,  //注释console
                                drop_debugger: true, //注释debugger
                                pure_funcs: ['console.log'], //移除console.log
                            },
                        },
                    })
                    
				]

			}
		}
	}
}