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

记录一下过程

手里有个老项目，vue2+webpack4

项目很大，每次运行、运行都要将近10分钟

现在又要往里面写很多东西，再不优化，开发着会更难受，所以决定先将它升级至webpack5

最初失败的尝试

直接在项目里安装了webpack5

但我的项目是用vue-cli4构建的，存在版本不兼容的问题，项目运行报了非常多的错

例如

javascript 复制代码

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.js
    at 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项目，然后来参考依赖

依赖：

javascript 复制代码

  "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的文件缓存至关重要

javascript 复制代码

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）

后面有时间再优化