HTML压缩
CSS压缩
JS压缩

正式发布上线,代码是需要压缩的。代码压缩之后,字节更小,访问速度更快。webpack4内置了uglifyjs-webpack-plugin插件,默认打包出来的js文件是压缩的。也可以手动安装uglifyjs-webpack-plugin,给他设置额外的参数,比如默认开启他的并行压缩。

css文件压缩

使用optimize-css-assets-webpack-plugin,同时安装cssnano(预处理器)

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

html文件的压缩

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

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

fhkd
9 声望0 粉丝