前言
之前2篇讲解了webpack的基本概念和基本使用配置,这篇来讲讲webpack的优化进阶，可能有些小伙伴会问怎么优化呀，先总结下从几方面入手可以有助于我们更系统地配置优化
- 代码分割：提取多个页面的公共代码、提取首屏不需要执行部分的代码让其动态加载或异步加载、提取css文件异步加载。
- 兼容性：css,js兼容性的处理让代码更稳健
- 文件优化：压缩 js/css/html/甚至是png等资源文件（减小文件的大小，减小内存占用）
- 缓存
- 删除未引用资源
附上的相关文章链接
打包文件文件压缩
当mode设置为production模式时，默认会提供js的压缩TerserPlugin, 使用css压缩插件
npm i optimize-css-assets-webpack-plugin -D
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
...//其它代码
optimization: {
minimizer:[new OptimizeCSSAssetsPlugin({})],//css压缩
}
效果上图
等等！我的js怎么不压缩了！！
搜索了下说是css的压缩插件会覆盖默认的js压缩配置链接所以要用一个新的js插件压缩js
来配一波
npm i terser-webpack-plugin -D
const TerserJSPlugin = require('terser-webpack-plugin');
...//其他代码
optimization: {
minimizer:[new OptimizeCSSAssetsPlugin({}),new TerserJSPlugin({})],//css js压缩
}
结果上图
gzip压缩文件 在index.js
...//其他代码
let button = document.getElementById("button")
button.addEventListener("click", () => {
import(/*webpackChunkName:"dialog", webpackPrefetch:true*/"./dialog").then(res => {
console.log(res)
})
});
npm install compression-webpack-plugin --save-dev
在webpack.prod.js中
const CompressionPlugin = require('compression-webpack-plugin');
...//其它代码
plugins:[
new CompressionPlugin()
]
执行打包结果
可以看到其它的都已压缩,唯独异步引入的文件没有压缩
「那就先到这吧😁」
参考资料
[1]前端模块管理器简介
[3]深入理解浏览器的缓存机制
