webpack 由 node_modules 與自行撰寫 JS 檔，合併編譯成一支 entry.js 檔所產生效能不好的問題

webpack 在將 JS 注入時都是以 entry 進入點注入，會把 node_modules 與自已撰寫的 JS 二個部份，同時加入到注入點成為 entry.js，將二個部份合併成一支 .js 檔。
webpack 執行 reload 時進行重新編譯，會自行判斷有沒有和之前的內容一樣，如果有一樣就執行重新打包，而沒有的話就直接略過。

但如果在處理自已撰寫的 .js 檔的部份時，會把二個部份在同時在重新打包一次，這樣的方式會使得編譯時效率會較差，另外所產生的 entry.js 檔也會變的很肥大。

透過拆分 JS，將 node_modules 處理成 vendor.js，而自行撰寫 JS 的處理成 entry.js 檔，優化編譯效能

為了改善 node_modules 與自已撰寫的 JS，在 webpack 同時一起處理成 entry.js 檔，讓處理的效率變差，這個問題將二個部份都拆開執行。

沒有安裝與使用新插件或是賴件時，由 node_modules 所產生的 vendor.js 就不會在處理編譯的動作。
而以自已撰寫的 JS 處理出來的 entry.js 檔，只針對修改的部份進行重新編譯。

webpack.config.js 加入拆分 vendor.js 設定

將相關設定加入在 module.exports = {} 裡面，透過 optimization 設定進行優化。

設定說明如下

  • optimization：為 webpack 下的優化設定項目。
  • splitChunks：分割塊
  • cacheGroups：緩存組
  • vendor：在 cacheGroups 下的一個設定方法
    • test: /node_modules/：指定提取 node_modules 的檔案。
    • name: 'vendor',：將 node_modules 的檔案提取後，命名為 vendor.js 檔。

更多 webpack 的 optimization 設定參考來源：webpack 的 optimization (優化) 文件

透過 optimization 以上的設定後，所拆出來的 vendor (執行編譯後就會處理成 vendor.js 檔)，就由原本的 entry.js 檔中獨立出來。

由 HtmlWebpackPlugin 中將拆分的 vendor.js 自動加入 HTML 樣版中

由 HtmlWebpackPlugin 所使用的 template.html 的 HTML 樣版加入 vendor 設定，如下

在 chunks: [] 裡多的 'index' 前方再多加入 'vendor'，所產出的 index.html，透過指令 npm run dev 所開才的頁面，可以見到自已撰寫的 JS 部份一樣有出現在開發者工具中。

另外在 index.html 的頁面結構中，也有多出一個 <script src="./js/vendor.js?xxxxxxxx"></script> 的結構。

在其他相關檔的 HtmlWebpackPlugin 有用 chunks 設定 vendor.js 引入，也同樣有把 vendor.js 注入，另外 <script src="./js/vendor.js?xxxxxxxx"></script> 的結構也都有。

輸入指令 npm run depoly 將 webpack 進行正式上線編譯，除了前面的前端套件說明注解外，其他部份的 JS 程式碼都有壓縮處理成單行。

此外 entry.js 的產生檔 index.js 內容，會處理過的 JS 程式碼也會只有單行