分離css

• 分離css：為何要把 CSS 檔案分離出來，而不是直接一起打包在 JS 中。最主要的原因是我們希望更好地利用快取。
• extract-text-webpack-plugin
  > 1. 假設我們原本頁面的靜態資源都打包成一個 JS 檔案，載入頁面時雖然只需要載入一個 JS 檔案，但是我們的程式碼一旦改變了，使用者訪問新的頁面時就需要重新載入一個新的 JS 檔案。有些情況下，我們只是單獨修改了樣式，這樣也要重新載入整個應用的 JS 檔案，相當不划算。 2. 還有一種情況是我們有多個頁面，它們都可以共用一部分樣式（這是很常見的，CSS Reset、基礎元件樣式等基本都是跨頁面通用），如果每個頁面都單獨打包一個 JS 檔案，那麼每次訪問頁面都會重複載入原本可以共享的那些 CSS 程式碼。如果分離開來，第二個頁面就有了 CSS 檔案的快取，訪問速度自然會加快。雖然對第一個頁面來說多了一個請求，但是對隨後的頁面來說，快取帶來的速度提升相對更加可觀。 因此當我們考慮更好地利用快取來加速靜態資源訪問時，會嘗試把一些公共資源單獨分離開來，利用快取加速，以避免重複的載入。除了公共的 CSS 檔案或者圖片資源等，當我們的 JS 程式碼檔案過大的時候，也可以用程式碼檔案拆分的辦法來進行優化。

抽離公共js資源，

• webpack4.x的optimization做配置

    module.exports = {
  // ... webpack 配置

  optimization: {
    splitChunks: {
      chunks: "all", // 所有的 chunks 程式碼公共的部分分離出來成為一個單獨的檔案
    },
  },
}

• 特別指出公共的檔案資源，而不讓webpack自己去判斷哪些是公共資源

// 
    module.exports = {
  entry: {
    vendor: ["react", "lodash", "angular", ...], // 指定公共使用的第三方類庫
  },
  optimization: {
    splitChunks: {
      cacheGroups: {
        vendor: {
          chunks: "initial",
          test: "vendor",
          name: "vendor", // 使用 vendor 入口作為公共部分
          enforce: true,
        },
      },
    },
  },
  // ... 其他配置
}

// 或者
module.exports = {
  optimization: {
    splitChunks: {
      cacheGroups: {
        vendor: {
          test: /react|angluar|lodash/, // 直接使用 test 來做路徑匹配
          chunks: "initial",
          name: "vendor",
          enforce: true,
        },
      },
    },
  },
}

// 或者
module.exports = {
  optimization: {
    splitChunks: {
      cacheGroups: {
        vendor: {
          chunks: "initial",
          test: path.resolve(__dirname, "node_modules") // 路徑在 node_modules 目錄下的都作為公共部分
          name: "vendor", // 使用 vendor 入口作為公共部分
          enforce: true,
        },
      },