（二十七）压缩js文件

步骤二十七

优化构建结果文件-压缩js文件

设置mode为production时,webpack会使用内置插件terser-webpack-plugin压缩js文件,该插件默认支持多线程压缩, 但是上面配置optimization.minimizer压缩css后,js压缩就失效了,需要手动再添加一下, webpack内部安装了该插件, 由于pnpm解决了幽灵依赖问题,如果用的pnpm的话,需要手动再安装一下依赖。

1. 安装依赖

npm i terser-webpack-plugin -D

2. 修改webpack.prod.js文件

// ...
const TerserPlugin = require('terser-webpack-plugin')
module.exports = {
  // ...
  optimization: {
    minimizer: [
      // ...
      new TerserPlugin({ // 压缩js
        parallel: true, // 开启多线程压缩
        terserOptions: {
          compress: {
            pure_funcs: ["console.log"] // 删除console.log
          }
        }
      }),
    ],
  },
}

配置完成后再打包,css和js就都可以被压缩了。