前端性能优化——构建优化（webpack性能优化）

webpack 的优化配置

• Tree Shaking
  • 基于 ES6 import export，打包时处理上下文未用到的代码
  • package.json 中配置 sideEffects
  • 注意 babel 默认配置的影响
• JS 压缩
  • webpack4 后引入 uglifyjs-webpack-plugin，生产模式使用 terser-webpack-plugin，减小 JS 体积
• 作用域提升
  • 减小代码体积，合并一些函数，提高执行效率
  • 同样要配置 babel.modules 为 false
  • babel7 优化配置
    • 在需要的地方引入 polyfill
    • 根据目标浏览器按需转换代码

webpack 的依赖优化

• noParse，提高构建速度，webpack 打包时忽略较大的第三方库
  • 被忽略的库不能有 import/require/define 的引入方式
• DllPlugin 动态链接库
  • 避免打包时对不变的库重复构建，提高构建速度

webpack 的资源压缩

• terser 压缩 JS
• mini-css-extract-plugin 压缩 CSS
• htmlWebpackPlugin 压缩 html

基于 webpack 的持久化缓存

• 每个打包的资源文件有唯一的 hash 值
• 修改后只有受影响的文件改变 hash 值
• 充分利用浏览器缓存

基于 webpack 的应用大小检测和分析

• stats 分析与可视化图
• webpack-bundle-analyzer 进行体积分析
• speed-measure-webkpack-plugin 速度分析

React 按需加载的实现方式

• react router 基于 webpack 动态引入
• 使用 reloadable 高级组件