如何在开发环境实现 webpack 4 production mode 的压缩效果?

发布于 2022-09-12 14:00:51 字数 1546 浏览 13 评论 0

需求和背景

commonjs 写的云函数代码,用 webpack 打包,然后在开发环境(mode=development|none)时打包出来的代码超出运行环境的限制了,因为希望在开发环境也能进行压缩。

尝试和结果

看到 webpack mode production 里列出的配置,于是搬到开发环境,最终的配置大概如下:

{
    mode: "none",
    target: 'node',
    optimization: {
      minimize: true,
      sideEffects: false,
      usedExports: true,
      concatenateModules: true,
      namedModules: false,
      namedChunks: false,
      occurrenceOrder: true,
      checkWasmTypes: true,
      nodeEnv: 'production',
      flagIncludedChunks: true,
      splitChunks: {
        hidePathInfo: true,
        minSize: 30000,
        maxAsyncRequests: 5,
        maxInitialRequests: 3,
      },
      noEmitOnErrors: true,
    },
    plugins: [new TerserPlugin({
      terserOptions: {
        ecma: 5,
        compress: {
          passes: 4,
          arrows: true,
          dead_code: true,
          drop_debugger: true,
          evaluate: true,
          side_effects: true,
          module: true,
        },
        mangle: true,
        nameCache: {},
      }
    })]
}

运行构建后,输出的包大小是 3.8M, 而只要把 mode 改成 production,输出包的大小就变成了 1.4M,看起来上面这些配置并不能起到 mode=production 的作用。

问题

请问 mode=production 还做了些什么工作?如何在开发环境实现 mode=production 的压缩效果?

相似问题:https://stackoverflow.com/que...

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文