摘要：默認(rèn)做法是告訴瀏覽器這個(gè)文件的緩存時(shí)間，然后當(dāng)文件內(nèi)容被修改，則需要重命名該文件告訴瀏覽器需要重新下載和緩存，例如也能做類似的工作。

上一篇介紹了 Webpack 優(yōu)化項(xiàng)目的四種技巧，分別是通過 UglifyJS 插件實(shí)現(xiàn)對(duì) JavaScript 文件的壓縮，css-loader 提供的壓縮功能，配置NODE_ENV可以進(jìn)一步去掉無用代碼，tree-shaking幫助找到更多無用代碼

這一篇主要講 Webpack 的改進(jìn)緩存(hash)、切割代碼

開發(fā)過程經(jīng)常需要一邊預(yù)覽代碼運(yùn)行結(jié)果一邊修改代碼，這個(gè)時(shí)候文件版本控制就顯得尤為重要。默認(rèn)做法是告訴瀏覽器這個(gè)文件的緩存時(shí)間，然后當(dāng)文件內(nèi)容被修改，則需要重命名該文件告訴瀏覽器需要重新下載和緩存，例如:

WebpackManifestPlugin 相比HtmlWebpackPlugin是一個(gè)更靈活的解決方案，尤其是面對(duì)復(fù)雜的服務(wù)端的部分。它能生成JSON文件，包含文件名以及與其對(duì)應(yīng)(映射)的 hash 過的文件名

{
  "bundle.js": "bundle.8e0d62a03.js"
}

提示：Webpack的 hash 函數(shù)是不穩(wěn)定的，這意味著在不同開發(fā)環(huán)境等條件下下，即便是同一個(gè)文件，webpack 依然會(huì)計(jì)算出不同的 hash 去標(biāo)識(shí)這個(gè)相同的文件。正因?yàn)榇?，如果你有跨平臺(tái)開發(fā)的需求，可以使用webpack-chunk-hash去代替webpack的原生的hash函數(shù)算法。更多關(guān)于 webpack hash 的問題可以查看：here

想象一下你要開發(fā)一個(gè)大型網(wǎng)站，有首頁(yè)和文章頁(yè)，文章頁(yè)里有文章內(nèi)容和評(píng)論系統(tǒng)，但是你要將網(wǎng)站正常工作的代碼都打包到一個(gè)文件里，這顯然是不科學(xué)的。每次你修改其中一個(gè)模塊，整改打包文件都要重新編譯重新打包和生成，這意味著你僅僅只是修改一下評(píng)論模塊，但當(dāng)用戶只訪問首頁(yè)，他們依然會(huì)下載這些暫時(shí)無用的代碼，從而影響首頁(yè)訪問的加載速度

這個(gè)時(shí)候就需要切割打包文件，把它切割為首頁(yè)和文章頁(yè)所需的兩個(gè)打包文件，當(dāng)用用戶訪問首頁(yè)時(shí)，只加載首頁(yè)的打包文件，當(dāng)訪問文章頁(yè)的時(shí)候，只加載文章頁(yè)的打包文件，配置如下：

module.exports = {
  // 設(shè)置多個(gè)入口點(diǎn)，webpack給每個(gè)入口文件生成對(duì)應(yīng)的打包文件
  // 從而實(shí)現(xiàn)不同頁(yè)面加載不同的打包文件
  entry: {
    homepage: "./index.js",
    article: "./article.js"
  },
  output: {
    // [name]對(duì)應(yīng)的是入口點(diǎn)的 name,如 homepage、article
    filename: "[name].[chunkhash].js"
  },
  plugins: [
    // 生成打包資源列表 json 文件
    new WebpackManifestPlugin(),
    // 取代 webpack 原生的 hash 函數(shù)
    new WebpackChunkHash(),
    // 生成依賴包的塊文件，轉(zhuǎn)移所有的`node_modules`依賴到一個(gè)特別的該文件中
    // 這允許你更新你的代碼時(shí)，無需更新依賴
    new webpack.optimize.CommonsChunkPlugin({
      name: "vendor",
      minChunks: m => m.context &&
        m.context.includes("node_modules"),
    }),
    // 生成 `webpack’s runtime` 自身的代碼文件
    // 這允許你更新你的代碼時(shí)，無需更新其他無關(guān)代碼
    new webpack.optimize.CommonsChunkPlugin({
      name: "runtime",
      chunks: ["vendor"],
      minChunks: Infinity,
    }),
    // 標(biāo)識(shí)每個(gè)模塊 hash 值，當(dāng)你添加新的模塊時(shí)，如果該模塊的依賴影響到別的模塊
    // 就可以更新這些受影響的模塊從而區(qū)分舊的模塊
    new webpack.HashedModuleIdsPlugin(),
    // 生成資源映射文件，包含文件名以及與其對(duì)應(yīng)的hash過的文件名，用于其他插件或者服務(wù)
    new ChunkManifestPlugin({
      filename: "chunk-manifest.json",
      manifestVariable: "webpackManifest"
    })
  ]
};

上面這個(gè)配置將會(huì)生成6個(gè)文件:

// 兩個(gè)打包入口文文件，當(dāng)你修改了業(yè)務(wù)代碼，它們也會(huì)跟著變化
homepage.a68cd93e1a43281ecaf0.js
article.d07a1a5e55dbd86d572b.js

// 通用依賴文件與 webpack’s runtime 的文件，前者當(dāng)你依賴包變化也跟著變化，后者極少變化，除非使用的 webpack 版本這類情況變化了才會(huì)跟著變化
vendor.1ebfd76d9dbc95deaed0.js
runtime.d41d8cd98f00b204e980.js

// 兩個(gè) manifest 文件，用于其他插件或服務(wù)，如 DllReferencePlugin
manifest.json
chunk-manifest.json

除了按照不同頁(yè)面的切割為不同的入口文件外的切割代碼外，還可以按照構(gòu)成頁(yè)面的組件的順序做到按需加載的去切割代碼

想象一下，有一個(gè)頁(yè)面布局方式如下所所示：

+-------------------------------+
| logo                    menu  |
+-------+----------------+------+
|       |                |      |
| left  |                | right|
| bar   |                | bar  |
|       |    article     |      |
|       |    content     |      |
|       |                |      |
|       |                |      |
|       +----------------+      |
|       |                |      |
|       |    comments    |      |
|       |                |      |
+-------+----------------+------+
|           copyright           |
+-------------------------------+

當(dāng)訪問這個(gè)頁(yè)面時(shí)，用戶希望首先能閱讀到文章的內(nèi)容，諸如其他評(píng)論、側(cè)邊欄等其他頁(yè)面組成部分是可以被延后查看的?？上У氖牵绻銓⑦@些頁(yè)面組成部分都打包到一個(gè)文件里，用戶就需要等到整改打包文件加載后才能訪問到他想要訪問的內(nèi)容

如何解決頁(yè)面中各部分的按需加載？webpack 允許你做這方面的優(yōu)化去實(shí)現(xiàn)代碼的按需加載。首先你需要自己識(shí)別哪些代碼是要首先加載的，然后 webpack 會(huì)移動(dòng)需要延遲加載的代碼到多帶帶的塊中，只有在當(dāng)需要這些被延遲加載的代碼時(shí)，才會(huì)下載

假設(shè)有一個(gè)article-page.js業(yè)務(wù)代碼文件，當(dāng)你打包加載其會(huì)全部加載，包括文章內(nèi)容、評(píng)論和側(cè)邊欄，如下：

// article-page.js
import { renderArticle } from "./components/article";
import { renderComments } from "./components/comments";
import { renderSidebar } from "./components/sidebar";

renderArticle();
renderComments();
renderSidebar();

做到按需加載則需要你將靜態(tài)的import修改為動(dòng)態(tài)的import()，webpack 會(huì)自帶轉(zhuǎn)移這些代碼到多帶帶的塊中，只有當(dāng)被需要時(shí)才會(huì)加載，如下：

// article-page.js
import { renderArticle } from "./components/article";
renderArticle();

import("./comments.js")
  .then((module) => { module.renderComments(); });
import("./sidebar.js")
  .then((module) => { module.renderSidebar(); });

將靜態(tài)的import修改為動(dòng)態(tài)的import()的操作會(huì)帶來提升首次訪問時(shí)加載性能，同事也會(huì)優(yōu)化緩存，當(dāng)你更改這些業(yè)務(wù)代碼時(shí)，只會(huì)修改對(duì)應(yīng)的塊文件，從而不影響其他塊文件

當(dāng)然，還需要重新設(shè)置 output ，如下：

// webpack.config.js
module.exports = {
  output: {
    filename: "[name].[chunkhash].js",
    chunkFilename: "[name].[chunkhash].js",
  }
};

output.chunkFilename可以標(biāo)識(shí)按需加載的塊文件

提示：當(dāng)你使用默認(rèn)的 presets 的 babel 去編譯這些代碼，你會(huì)得到一個(gè)語法錯(cuò)誤提示：Babel don’t understand import() out of the box. 要避免這個(gè)錯(cuò)誤，你需要給babel安裝syntax-dynamic-import插件

在一個(gè)大型項(xiàng)目中，如果有兩段業(yè)務(wù)代碼有共同的依賴，通過 webpack 的externals，你在兩段代碼間可以共享這些依賴，如下：

// webpack.config.js
module.exports = {
  externals: {
    "react": "React",
    "react-dom": "ReactDOM",
  }
};

上面的做法是將這些框架或庫(kù)的對(duì)象掛靠在全局對(duì)象中，然后通過另外一個(gè)對(duì)象存儲(chǔ)對(duì)象名以及映射到對(duì)應(yīng)模塊名的變量，webpack 就會(huì)替換所有所有模塊下的相關(guān)的引用，然后你需要手動(dòng)引入這些被externals的框架或庫(kù)到網(wǎng)站入口文件中，如HtmlWebpackPlugin定義的template文件

這次介紹如何通過 webpack 克服瀏覽器緩存打包文件，不去更新新的打包文件的問題，以及講解了從不同的頁(yè)面的角度去切割代碼和從不同的頁(yè)面組成部分去切割代碼的過程，還有通過externals去分離去共有的框架和庫(kù)，從而實(shí)現(xiàn)對(duì)這些框架或庫(kù)的CDN資源加載

內(nèi)容較多，大概就這樣~

文章首發(fā)于：https://www.linpx.com/p/webpa...
歡迎訪問我的博客：https://www.linpx.com