【前端优化】vue2 webpack4项目升级webpack5，大大提升运行速度

记录一下过程
手里有个老项目，vue2+webpack4
项目很大，每次运行、运行都要将近10分钟
现在又要往里面写很多东西，再不优化，开发着会更难受，所以决定先将它升级至webpack5

最初失败的尝试

直接在项目里安装了webpack5
但我的项目是用vue-cli4构建的，存在版本不兼容的问题，项目运行报了非常多的错
例如

INFO  Starting development server...ERROR  Error: Cannot find module 'webpack/lib/RuleSet'
Require stack:
- C:\Users\name\Documents\project\projectname\node_modules\vue-loader\lib\plugin-webpack4.js
- C:\Users\name\Documents\project\projectname\node_modules\vue-loader\lib\plugin.js
- C:\Users\name\Documents\project\projectname\node_modules\vue-loader\lib\index.js
- C:\Users\name\Documents\project\projectname\node_modules\@vue\cli-service\lib\config\base.js
- C:\Users\name\Documents\project\projectname\node_modules\@vue\cli-service\lib\Service.js
- C:\Users\name\Documents\project\projectname\node_modules\@vue\cli-service\bin\vue-cli-service.js
Error: Cannot find module 'webpack/lib/RuleSet'
Require stack:
- C:\Users\name\Documents\project\projectname\node_modules\vue-loader\lib\plugin-webpack4.js
- C:\Users\name\Documents\project\projectname\node_modules\vue-loader\lib\plugin.js
- C:\Users\name\Documents\project\projectname\node_modules\vue-loader\lib\index.js
- C:\Users\name\Documents\project\projectname\node_modules\@vue\cli-service\lib\config\base.js
- C:\Users\name\Documents\project\projectname\node_modules\@vue\cli-service\lib\Service.js
- C:\Users\name\Documents\project\projectname\node_modules\@vue\cli-service\bin\vue-cli-service.jsat Function.Module._resolveFilename (node:internal/modules/cjs/loader:1028:15)at Function.Module._load (node:internal/modules/cjs/loader:873:27)at Module.require (node:internal/modules/cjs/loader:1100:19)at require (node:internal/modules/cjs/helpers:119:18)at Object.<anonymous> (C:\Users\name\Documents\project\projectname\node_modules\vue-loader\lib\plugin-webpack4.js:2:17)at Module._compile (node:internal/modules/cjs/loader:1198:14)at Object.Module._extensions..js (node:internal/modules/cjs/loader:1252:10)at Module.load (node:internal/modules/cjs/loader:1076:32)at Function.Module._load (node:internal/modules/cjs/loader:911:12)at Module.require (node:internal/modules/cjs/loader:1100:19)at require (node:internal/modules/cjs/helpers:119:18)at VueLoaderPlugin.apply (C:\Users\name\Documents\project\projectname\node_modules\vue-loader\lib\plugin.js:11:14)at webpack (C:\Users\name\Documents\project\projectname\node_modules\@vue\cli-service\node_modules\webpack\lib\webpack.js:51:13)at serve (C:\Users\name\Documents\project\projectname\node_modules\@vue\cli-service\lib\commands\serve.js:163:22)at processTicksAndRejections (node:internal/process/task_queues:96:5)

尝试安装vue-loader、webpack-cli等，报错依然存在

解决

我的电脑里本就安装了@vue/cli 5.0.8，于是想着用它创一个vue2项目，然后来参考依赖

依赖：

  "dependencies": {"core-js": "^3.8.3","vue": "^2.6.14"},"devDependencies": {"@babel/core": "^7.12.16","@babel/eslint-parser": "^7.12.16","@vue/cli-plugin-babel": "~5.0.0","@vue/cli-plugin-eslint": "~5.0.0","@vue/cli-service": "~5.0.0","eslint": "^7.32.0","eslint-plugin-vue": "^8.0.3","vue-template-compiler": "^2.6.14"},

把开发依赖复制到项目中，运行报错解决

修改vue.config.js
修改配置适配webpack5，提升打包、运行速度
webpack5的文件缓存至关重要

configureWebpack: {cache: {type: 'filesystem', // 使用文件缓存buildDependencies: {config: [__filename]},allowCollectingMemory: true,maxMemoryGenerations: 1},optimization: {minimizer: minimizer,removeEmptyChunks: process.env.NODE_ENV === 'production',splitChunks: splitChunks},plugins: plugins,module: {noParse: /jquery/,rules: [{test: /\.js$/,include: path.resolve(__dirname, 'src'),exclude: file => (/node_modules/.test(file) && !/\.vue\.js/.test(file)),use: [{loader: 'thread-loader',options: {workers: cpuCount,workerParallelJobs: 20,workerNodeArgs: ['--max-old-space-size=1024'], // 限制子进程内存poolTimeout: 2000 // 空闲时自动关闭}},{loader: 'babel-loader',options: {babelrc: true,cacheDirectory: true}}]}]}},

结果

简单配置后，项目初次运行时间缩短了一半，第二次重新运行时间在1分钟内，提升显著
打包时间也缩短了2/3

其他

esbuild-loader优于babel-loader（https://juejin.cn/post/7422338076528640010）
后面有时间再优化