抽離css以及公共js

分離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,
        },
      },
    },
  },
}