webpack优化：提高二次构建速度

痛点：

开发过程中改一行代码却要等webpack构建半天实在太捉急。

项目背景

我们的项目是@vue/cli4生成的，基于webpack和vue2开发，未使用ts。用到了很多jquery、lodash、echarts等第三方依赖。

参考：

@vue/cli4已经默认配置过一些优化方法了，比如为babel-loader增加cache-loder。请教了deepseek和google之后，根据项目的实际情况和当前时间，先做了两处优化。效果已经很明显了
另外也主要参考了这位大佬的分享带你深度解锁Webpack系列(优化篇)，先谢过~

实际开发过程

一、使用HardSourceWebpackPlugin插件

此插件为模块提供中间缓存，缓存默认的存放路径是: node_modules/.cache/hard-source。

配置 hard-source-webpack-plugin，首次构建时间没有太大变化，但是第二次开始，构建时间大大节约了。
1、安装插件

npm install hard-source-webpack-plugin -D

2、在vue.config.js使用

const HardSourceWebpackPlugin = require('hard-source-webpack-plugin')
plugins: [
        new HardSourceWebpackPlugin()
    ]

二、配置了noParse

如果一些第三方模块没有AMD/CommonJS规范版本，可以使用 noParse 来标识这个模块，这样 Webpack 会引入这些模块，但是不进行转化和解析，从而提升 Webpack 的构建性能，例如：jquery 、lodash。
正好，jquery和lodash我们的项目都使用到了。

先确认一下vue-cli有没有进行noParse配置。首先导出Vue-处cli的默认配置：

npx vue-cli-service inspect --mode development > dev.js

会发现已经配置了

noParse: /^(vue|vue-router|vuex|vuex-router-sync)$/,

那么我们要添加上jquery和lodash。在vue.config.js中添加如下：

configureWebpack: config => {
     // 确保 noParse 是数组格式（Vue CLI 默认可能是 RegExp 或 Array）
      config.module.noParse = config.module.noParse || []

      // 如果默认是 RegExp，转换成数组
      if (config.module.noParse instanceof RegExp) {
        config.module.noParse = [config.module.noParse]
      }

      // 添加 jQuery 到 noParse
      config.module.noParse.push(/^(jquery)$/)
      config.module.noParse.push(/^(lodash)$/)
}

再查看vue-cli配置，发现noParse配置已经加上了：

   noParse: [
         /^(vue|vue-router|vuex|vuex-router-sync)$/,
         /^(jquery)$/,
         /^(lodash)$/
      ],

验证配置,做了如下记录（仅针对二次构建）：

hard-source	noParse增加jquery和lodash	结果
无	无	DONE Compiled successfully in 7162ms
无	有	DONE Compiled successfully in 5773ms
有	无	DONE Compiled successfully in 3945ms
有	有	DONE Compiled successfully in 2882ms