推荐:《webpack学完这些就够了》
《webpack学完这些就够了》该专题主要讲述webpack4.x从入门到成仙的学习笔记,配置和原理应有尽有。现在由于webpack5.0的诞生,打算从现在开始从0开始写一遍webpack5.0的学习笔记,与大家一起分享学习。
以下是本节正文:
压缩JS、CSS和HTML及图片
压缩js用terser-webpack-plugin,不在使用uglifyjs-webpack-plugin,因为前者支持ES6,后者不支持,所以现在都使用前者
压缩css用optimize-css-assets-webpack-plugin
1. 压缩js
-
压缩js用terser-webpack-plugin插件,可以优化和压缩JS资源
-
插件配置:
module.exports = { ... optimization: { minimize: true, minimizer: [ new TerserPlugin(), ], }, }
-
为什么不使用uglifyjs-webpack-plugin?
- 不在使用uglifyjs-webpack-plugin,因为前者支持ES6,后者不支持,所以现在都使用前者
2. 压缩css
-
插件配置:
module.exports = { ... plugins: [ ... new OptimizeCssAssetsWebpackPlugin(), ] }
3. 压缩html
-
压缩html在html-webpack-plugin中配置即可
-
插件配置:
module.exports = { ... plugins: [ new HtmlWebpackPlugin({ template: './src/index.html', minify: { // 压缩html collapseWhitespace: true, removeComments: true } }), ] }
4.图片压缩
一般不太做图片压缩,压缩不太好控制图片质量
- 压缩可以使用image-webpack-loader, 帮助我们对图片进行压缩和优化
- 常用方式点击上方链接查看文档