uni-app H5开启摇树优化后，vue.config.js里chainWebpack的optimization设置打包删除console失效

uni-app H5开启摇树优化后，vue.config.js里chainWebpack的optimization设置打包删除console失效

项目信息 值
产品分类 uniapp/H5
PC开发环境 Mac
PC开发环境版本 macOS Big Sur 11.5
浏览器平台 Chrome
浏览器版本 safari 14.1.2
项目创建方式 CLI
CLI版本号 4.5.0

bug描述：

在manifest.json里，H5开启摇树优化， vue.config.js的chainWebpack设置失效

示例代码：

"h5": {  
    "optimization": {  
        "treeShaking": {  
            "enable": true //启用摇树优化  
        }  
    }  
}

chainWebpack: config => {  
    // 发行或运行时启用了压缩时会生效  
    config.optimization.minimizer('terser').tap(args => {  
        const compress = args[0].terserOptions.compress;  
        // 非 App 平台移除 console 代码(包含所有 console 方法，如 log,debug,info...)  
        compress.drop_console = true;  
        compress.pure_funcs = [  
            '__f__' // App 平台 vue 移除日志代码  
            // 'console.debug' // 可移除指定的 console 方法  
        ];  
        return args;  
    });  
}

操作步骤：

H5启用摇树优化
vue.config.js设置打包删除console配置

预期结果：

console不被打包到生产环境

实际结果：

console 仍然被打包进生产环境


更多关于uni-app H5开启摇树优化后，vue.config.js里chainWebpack的optimization设置打包删除console失效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app H5开启摇树优化后，vue.config.js里chainWebpack的optimization设置打包删除console失效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 uni-app H5 项目中开启摇树优化后，vue.config.js 中的 chainWebpack 配置失效，是因为摇树优化会覆盖默认的 webpack 配置。此时需要调整配置方式，将 terser 压缩配置直接写入 vue.config.js 的 configureWebpack 或通过条件判断修改 chainWebpack。

解决方案：

  1. 关闭摇树优化（不推荐，但可验证问题）：在 manifest.json 中设置 "enable": false，确认 chainWebpack 配置是否生效。
  2. 修改配置位置：在 vue.config.js 中使用 configureWebpack 替代 chainWebpack，因为摇树优化会重置 webpack 的 optimization 选项。示例：
    configureWebpack: {
  optimization: {
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          compress: {
            drop_console: true,
            pure_funcs: ['__f__']
          }
        }
      })
    ]
  }
}
    注意：需安装 terser-webpack-plugin 依赖。
  3. 动态启用配置：在 chainWebpack 中通过环境变量判断是否启用摇树优化，并调整配置。示例：
    chainWebpack: config => {
  if (process.env.NODE_ENV === 'production') {
    config.optimization.minimizer('terser').tap(args => {
      args[0].terserOptions.compress.drop_console = true;
      return args;
    });
  }
}
回到顶部