如何减小打包体积提高页面加载速度
# 如何减小打包体积提高页面加载速度
# 分析输出文件
使用插件 webpack-bundle-analyzer
# 常用优化方法
# 减小打包体积
- 代码压缩
- JS 压缩： 使用 TerserWebpackPlugin 来压缩 JavaScript。
- CSS 压缩： 使用 CssMinimizerWebpackPlugin 压缩 CSS 文件。
- 代码分离
抽离重复代码： SplitChunksPlugin 插件开箱即用，可以将公共的依赖模块提取到已有的入口 chunk 中，或者提取到一个新生成的 chunk。
CSS 文件分离： MiniCssExtractPlugin 插件将 CSS 提取到单独的文件中，为每个包含 CSS 的 JS 文件创建一个 CSS 文件，并且支持 CSS 和 SourceMaps 的按需加载。
最小化 entry chunk： 通过配置 optimization.runtimeChunk = true，为运行时代码创建一个额外的 chunk，减少 entry chunk 体积，提高性能。
- tree-shaking摇树
JS：目的就是去除被引用但是没有被使用的代码 只需要将mode模式设置为production即可开启 （webpack5 sideEffects）
对组件库引用的优化：按需引入所需的方法或者组件 lodash、ant-design等
CSS：使用 purgecss-webpack-plugin 对 CSS Tree Shaking。
- CDN
可以将一些资源文件或者是不想参与打包的库通过cdn引入，然后externals配置外部扩展
# 提高页面加载速度
- 懒加载
通过 webpack 提供的 import() 语法 动态导入 功能进行代码分离，通过按需加载，大大提升网页加载速度。
- 小图片使用base64格式，不使用用网络请求
通过url-loader会将小图片转为base64格式，减少网络请求，提升加载速度
- 打包时合理使用hash，如果没改动的文件，命中缓存
当我们在打包时，使用hash计算文件变动，如果文件被改变，则hash的值改变，在上线后，浏览器访问时没有改变的文件会命中缓存，从而达到性能优化的目的
# 参考文章链接
学习 Webpack5 之路（优化篇） (opens new window)
webpack优化解决项目体积大、打包时间长、刷新时间长问题！ (opens new window)