代码压缩

JS代码压缩

内置了uglifyjs-webpack-plugin

CSS文件的压缩

• 使用optimize-css-assets-webpack-plugin，同时使用cssnano(webpack4)

module.exports = {
  // ....
  plugins: [
    new OptimizeCSSAssetsPlugin({
      assetNameRegExp: /\.css$/g,
      cssProcessor: require('cssnano'),
    })
  ]
};

• 使用css-minimizer-webpack-plugin，

  module.exports = {
    // ...
    optimization: {
      minimize: false, // If you want to run it also in development set the optimization.minimize option to true
      minimizer: [
        // For webpack@5 you can use the `...` syntax to extend existing minimizers (i.e. `terser-webpack-plugin`), uncomment the next line
        // `...`,
        new CssMinimizerPlugin(),
      ],
    },
  }

HTML文件的压缩

修改html-webpack-plugin，设置压缩参数

module.exports = {
  // ....
  plugins: [
    new HtmlWebpackPlugin({
      template: path.join(__dirname, 'src/serach.html'),
      filename: 'search.html',
      chunks: ['search'],
      inject: true,
      minify: {
        html5: true,
        collapseWhitespace: true,
        preserveLineBreaks: false,
        minifyCSS: true,
        minifyJS: true,
        removeComments: false
      }
    })
  ]
};