nuxt2 服务端配置terser配置无效问题 - 橙红技术

背景

生产环境服务端会打印大量的调试用的 log, 一部分是影响排查问题的, 另一部分是影响性能的, 所以需要将这些 log 给去掉, 之前一直以为是开发人员没有配置 terser导致的。最近正好在定位 nodejs内存泄露问题，就想着一起解决一下。但是发现nuxt.config.js 中已经配置了terser配置，但是还是没有生效。

build: {
    terser: {
      extractComments: false,
      terserOptions: {
        compress: {
          drop_console: true,
        },
      },
    },
  },

分析

通过build 打印的 webpack config 发现，nuxt2 中服务端的 webpack 配置默认是不进行minimizer的。推测是因为源码也不会暴露，而且也不存在网络传输，所以服务端的代码不需要进行压缩，nuxt2 默认就没有走 terser的配置。

解决

那么判断是build时，判断时服务端代码打包，手动引入 terser 插件配置即可。

为了方便定位服务端位置，变量名混淆是关闭的。

build: {
   extend(config, ctx) {
      const { isClient } = ctx
      if(!isClient && ['prod', 'pre'].includes(STAGE)){
        config.optimization.minimizer = [
          new TerserPlugin({
            sourceMap: false,
            terserOptions: {
              compress: {
                drop_console: true,  // 只移除 console
                drop_debugger: true, // 移除 debugger
              },
              mangle: false,  // 关闭变量名混淆
              output: {
                beautify: true,  // 保持代码美化
                comments: false  // 移除注释
              }
            }
          })
        ]
      }
      return config
    }
}

服务端进行压缩时候会消耗一定的 build时长，导致整个部署时间拉长，如果前期规划的比较好，也可以不用进行这个压缩。比如项目的 console日志提前封装好，项目规范里规定必须使用封装的 log 方法，那么可以在封装 log里自定义如何时机或者场景打印日志。