痛點：

開發過程中改一行代碼卻要等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)$/
      ],

驗證配置,做了如下記錄（僅針對二次構建）：