〇、项目背景
作为一个已经存在超8年的海外教育项目，我们项目代码超过十万行。项目从js原生技术栈到React，再一路升级到目前的React 16.14 + Webpack 4 + Craco + Wujie微前端的技术框架。
项目的打包速度近20分钟，最终在各种手段优化后来到8分钟，我将分两个系列将会详解我们整个打包优化过程中遇到的问题与每个问题的解决手段。
一、优化方案
第一系列为深入Craco/Webpack升级。我们需要将webpack 4 升级至 webpack 5，作为已经推出4年的框架，目前也已经相当稳定，优点如下
-
性能改进：
- Webpack 5 在构建速度和性能方面有所提升。这主要是通过改进缓存策略、优化构建算法以及增强的持久化缓存等方式实现的。这意味着更快的构建时间和更高的整体性能。
-
支持Tree Shaking：
- 在 Webpack 5 中，Tree Shaking（树摇）机制得到了改进，这意味着它更有效地识别和删除未使用的代码，以减小最终构建的文件大小。
-
对ES6模块和JSON模块的优化：
- Webpack 5 对于 ES6 模块和 JSON 模块的处理更加智能和优化，从而提高了构建速度。
-
默认持久化缓存：
- Webpack 5 默认启用了持久化缓存，这意味着构建过程中的中间结果会被缓存，以便在后续的构建中重复使用，进而加快构建速度。
-
改进的 Tree Shaking 算法：
- Webpack 5 中对 Tree Shaking 算法进行了改进，使其更加精确和高效，从而能够更好地识别和删除未使用的代码。
二、现有逻辑
我们的package.json简化后如下
"cmd": "run-script-os --",
"start": "npm run cmd -- craco --max_old_space_size=8192 start",
"build": "npm run cmd -- craco --max_old_space_size=4096 build",
"test": "npm run cmd -- craco test --env=jsdom",
我们的craco.config.js中有大量的webpack配置，升级过程中一定会遇到需要步调webpack config的情况，这里介绍下如何使用vscode断点craco中的webpack配置。（这里如果用其他的调试器例如chrome控制台也行）
三、详细配置
修改package.json， 添加测试使用的命令
"cmd": "run-script-os --",
"start": "npm run cmd -- craco --max_old_space_size=8192 start",
"build": "npm run cmd -- craco --max_old_space_size=4096 build",
"test": "npm run cmd -- craco test --env=jsdom",
"start-brk": "npm run cmd -- craco --max_old_space_size=8192 --inspect-brk start",
"build-brk": "npm run cmd -- craco --max_old_space_size=4096 --inspect-brk build",
"test-brk": "npm run cmd -- craco --inspect-brk test --env=jsdom",
.vscode/launch.json的配置：
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch via NPM",
"request": "launch",
"runtimeArgs": [
"run",
"start-brk",
],
"runtimeExecutable": "npm",
"skipFiles": [
"<node_internals>/**"
],
"type": "node"
},
]
如果有多个node版本，可以通过在launch.json configurations中添加runtimeVersion配置，指定node版本，例如
"runtimeVersion": "18.20.3"
然后点击vscode launch via npm
vscode的debugger成功捕获到craco源码的第一行start.js，此时可以回到我们自己的webpack配置，开始快乐断点
四、后续内容
- 升级过程中的常规错误集, 例如path, process变量不存在问题，hard-source-webpack-plugin移除问题，postcss失效问题等
- 升级过程中稍微复杂的错误集，例如umd文件错误导入问题，html-webpack-plugin版本混淆问题等
- Tapble介绍以及webpack自研plugins的迁移与兼容处理
