项目构建优化

以前其实做过类似的项目构建上的优化工作，但比较散乱，希望能做一个系统的整理，至少划分出几个基本的优化方向，以作为后续项目优化的参考

这里的构建优化，暂时针对的是 webpack 构建的单页面应用项目

现有问题修复

当然要优先解决掉项目现有的问题

代码规范配置

这个是为了提高协作效率，主要是新增以下配置

• .vscode
• eslint
• prettier
• commitlint
• husky
• editorConfig

配置详情可以参考我之前整理的文章 https://blog.zhouweibin.top/FEED/create-react-app/

热更新异常

触发热更新时，控制台会报错 React Uncaught ReferenceError: process is not defined

原因是 react-error-overlay 最新版本已支持 webpack5 ，如果要适配 webpack4，插件需要回退到 6.0.9。问题参考 https://stackoverflow.com/questions/70368760/react-uncaught-referenceerror-process-is-not-defined

后面升级到 webpack5，其实也就自动 fix 这个问题了

支持本地单独打包

之前单独打包后，没法用 serve 调试，排查发现是 package.json 的 homepage 改了资源路径，去除后单独构建就正常了

开发体验

• 增加构建进度条
• 增加项目版本输出信息
• 增强 axios 接口封装函数
• react 组件局部热更。好像暂不支持 webpack5，留意后续的更新吧

构建速度

分析工具：

• speed-measure-webpack-plugin。待确认 CRA5 能否使用

create-react-app@5（CRA5）默认做了蛮多构建优化的工作了，后面打算研究下源码看看

升级 webpack5

增加了开箱即用的持久化缓存，是 webpack4 的 hardSourcesPlugin/cache-loader/loader cache的有效替代品，rebuild 速度提升明显。当然还有其他的特性和优化，可以参考 webpack5 升级踩坑

升级前后构建耗时参考：

• 升级前，首次构建 ≈50s，二次构建 ≈18s；build≈110s
• 升级后，首次构建 ≈42s，二次构建 ≈3.6s；build≈70s

esbuild-loader

替换 babel-loader，但 CRA5 高度配置的情况下不好替换，估计还得 eject 配置，待定

包体积优化

分析工具：

• webpack-bundle-analyzer
• source-map-explorer

优化方法

• 移除不用的依赖
• 大体积包按需引入
  • echarts 按需引入(210k—>69k)
  • antv/G2 按需加载暂不支持，现在是项目使用的最大的包，后续有计划统一换成 echarts
  • loadsh 属于其他模块引入，暂不处理
  • ant-design 增加按需引用 babel-plugin-import 插件，发现实际并没效果，应该是 antd 本身已支持 tree-shaking，参考这个 issue。antd 的样式应该还是可以通过 babel-plugin-import 进行按需加载，不过 antd5 已经用 css-in-js 重构了样式代码

分包

分包(code-spliting)的目的是防止多个文件（比如路由懒加载产生的多个文件）重复打包公共的依赖，比如 react、vue、antd 等，同时也能更好地利用浏览器并行下载资源来加速首屏

怎么合理地分包是个值得探究的问题 ~

其他

• 微前端重构优化，涉及构建加速，可以参考 https://blog.zhouweibin.top/FEED/%E5%BE%AE%E5%89%8D%E7%AB%AF%E9%87%8D%E6%9E%84/

最后

项目构建优化这方面感觉还是有很多东西待探索的，而且不局限于单页面应用，持续更新 ing…