JS、HTML、CSS 压缩

JS 压缩

webapck 4 内置 terser-webpack-pluginmode: 'production' 则开启。
webpack 3 以及之前则内置 uglifyjs-webpack-plugin(现已不维护)。

CSS 压缩

使用 optimize-css-assets-webpack-plugin
同时使用 csshano

  1. // webpack.config.js
  2. const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
  3. module.exports = {
  4. //...
  5. plugins: [
  6. new OptimizeCSSAssetsPlugin({
  7. assetNameRegExp: /\\.css$/g,
  8. cssProcessor: require('cssnano'),
  9. })
  10. ]
  11. }

HTML 压缩

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

  1. // webpack.config.js
  2. const HtmlWebpackPlugin = require('html-webpack-plugin')
  3. module.exports = {
  4. //...
  5. plugins: [
  6. new HtmlWebpackPlugin({
  7. // 模版路径
  8. template: path.join(__dirname, 'src/index.html'),
  9. // 将 HTML 写入的文件,默认为 index.html
  10. filename: 'index.html',
  11. // 对应 entry 中的键,希望哪个 chunk 注入就写哪个
  12. chunks: ['index'],
  13. // 将资源注入给定的 template,默认 true
  14. inject: true,
  15. // 压缩输出,默认 true
  16. minify: {
  17. html5: true, // 根据 HTML5 规范解析输入
  18. collapseWhitespace: true, // 删除空白
  19. preserveLineBreaks: false, // 删除换行符
  20. minifyCSS: true, // 压缩 CSS
  21. minifyJS: true, // 压缩 JS
  22. removeComments: false, // 删除 HTML 注释
  23. },
  24. })
  25. ]
  26. }

区别

html-webpack-plugin 里面的 minify 的 minifyCSS 参数和 minifyJS 参数用于压缩一开始就内联在 HTML 里面的 CSS 和 JS,不是打包生成的 CSS 和 JS。