uniapp 如何将 `build.minify` 设置为 "terser"

在uniapp项目中，如何将 build.minify 配置为使用 “terser” 进行代码压缩？我尝试在 vue.config.js 中设置，但似乎没有生效。正确的配置方式是什么？需要修改哪个配置文件？是否还需要安装额外的依赖？

2 回复

在 vue.config.js 中配置：

module.exports = {
  configureWebpack: {
    optimization: {
      minimizer: [
        new TerserPlugin()
      ]
    }
  }
}

需要先安装 terser-webpack-plugin。


在 UniApp 中，可以通过修改项目的配置文件 vue.config.js 来将 build.minify 设置为 “terser”。具体步骤如下：

  1. 检查项目根目录下是否存在 vue.config.js 文件。如果没有，请手动创建该文件。
  2. 配置 vue.config.js，添加以下代码：
module.exports = {
  configureWebpack: {
    optimization: {
      minimize: true, // 确保启用压缩
      minimizer: [
        new (require('terser-webpack-plugin'))({ // 使用 terser 作为压缩工具
          terserOptions: {
            compress: {
              drop_console: true, // 可选：移除 console 语句
            },
          },
        }),
      ],
    },
  },
};
  1. 安装依赖（如果尚未安装 terser-webpack-plugin）： 在项目目录下运行命令：
    npm install terser-webpack-plugin --save-dev

注意事项：

  • 此配置适用于 HBuilderX 创建的项目或使用 Vue CLI 的 UniApp 项目。
  • 如果使用 HBuilderX，请确保在「运行」或「发行」时选择「自定义条件编译」，以应用配置。
  • 设置 drop_console: true 是可选的，用于移除代码中的 console 语句，以减少包体积。

完成以上步骤后，构建项目时就会使用 Terser 进行代码压缩。

回到顶部