摘要：前言時(shí)光飛逝，轉(zhuǎn)眼又偷懶了一個(gè)多月什么是文件為動(dòng)態(tài)鏈接庫(kù)文件在中，許多應(yīng)用程序并不是一個(gè)完整的可執(zhí)行文件，它們被分割成一些相對(duì)獨(dú)立的動(dòng)態(tài)鏈接庫(kù)，即文件，放置于系統(tǒng)中。

（時(shí)光飛逝，轉(zhuǎn)眼又偷懶了一個(gè)多月）

DLL(Dynamic Link Library)文件為動(dòng)態(tài)鏈接庫(kù)文件,在Windows中，許多應(yīng)用程序并不是一個(gè)完整的可執(zhí)行文件，它們被分割成一些相對(duì)獨(dú)立的動(dòng)態(tài)鏈接庫(kù)，即DLL文件，放置于系統(tǒng)中。當(dāng)我們執(zhí)行某一個(gè)程序時(shí)，相應(yīng)的DLL文件就會(huì)被調(diào)用。

舉個(gè)例子：很多產(chǎn)品都用到螺絲，但是工廠在生產(chǎn)不同產(chǎn)品時(shí)，不需要每次連帶著把螺絲也生產(chǎn)出來(lái)，因?yàn)槁萁z可以多帶帶生產(chǎn)，并給多種產(chǎn)品使用。在這里螺絲的作用就可以理解為是dll。

通常來(lái)說(shuō)，我們的代碼都可以至少簡(jiǎn)單區(qū)分成業(yè)務(wù)代碼和第三方庫(kù)。如果不做處理，每次構(gòu)建時(shí)都需要把所有的代碼重新構(gòu)建一次，耗費(fèi)大量的時(shí)間。然后大部分情況下，很多第三方庫(kù)的代碼并不會(huì)發(fā)生變更（除非是版本升級(jí)），這時(shí)就可以用到dll：把復(fù)用性較高的第三方模塊打包到動(dòng)態(tài)鏈接庫(kù)中，在不升級(jí)這些庫(kù)的情況下，動(dòng)態(tài)庫(kù)不需要重新打包，每次構(gòu)建只重新打包業(yè)務(wù)代碼。

還是上面的例子：把每次構(gòu)建，當(dāng)做是生產(chǎn)產(chǎn)品的過(guò)程，我們把生產(chǎn)螺絲的過(guò)程先提取出來(lái)，之后我們不管調(diào)整產(chǎn)品的功能或者設(shè)計(jì)（對(duì)應(yīng)于業(yè)務(wù)代碼變更），都不必重復(fù)生產(chǎn)螺絲（第三方模塊不需要重復(fù)打包）；除非是產(chǎn)品要使用新型號(hào)的螺絲（第三方模塊需要升級(jí)），才需要去重新生產(chǎn)新的螺絲，然后接下來(lái)又可以專注于調(diào)整產(chǎn)品本身。

使用dll時(shí)，可以把構(gòu)建過(guò)程分成dll構(gòu)建過(guò)程和主構(gòu)建過(guò)程（實(shí)質(zhì)也就是如此），所以需要兩個(gè)構(gòu)建配置文件，例如叫做webpack.config.js和webpack.dll.config.js。

DllPlugin是webpack內(nèi)置的插件，不需要額外安裝，直接配置webpack.dll.config.js文件：

module.exports = {=
  entry: {
    // 第三方庫(kù)
    react: ["react", "react-dom", "react-redux"]
  },
  output: {
    // 輸出的動(dòng)態(tài)鏈接庫(kù)的文件名稱，[name] 代表當(dāng)前動(dòng)態(tài)鏈接庫(kù)的名稱，
    filename: "[name].dll.js",
    path: resolve("dist/dll"),
    // library必須和后面dllplugin中的name一致 后面會(huì)說(shuō)明
    library: "[name]_dll_[hash]"
  },
  plugins: [
  // 接入 DllPlugin
    new webpack.DllPlugin({
      // 動(dòng)態(tài)鏈接庫(kù)的全局變量名稱，需要和 output.library 中保持一致
      // 該字段的值也就是輸出的 manifest.json 文件 中 name 字段的值
      name: "[name]_dll_[hash]",
      // 描述動(dòng)態(tài)鏈接庫(kù)的 manifest.json 文件輸出時(shí)的文件名稱
      path: path.join(__dirname, "dist/dll", "[name].manifest.json")
    }),
  ]
}

我們先來(lái)看看，這一步到底做了什么。執(zhí)行：webpack --config webpack.dll.config，然后到指定的輸出文件夾查看輸出：

react.dll文件里是使用數(shù)組保存的模塊，索引值就作為id；

react.manifest.json文件里，是用來(lái)描述對(duì)應(yīng)的dll文件里保存的模塊

里暴露出剛剛構(gòu)建的所有模塊，如下：

{
  "name":"react_dll_553e24e2c44987d2578f",
  "content":{
    "./node_modules/webpack/node_modules/process/browser.js":{"id":0,"meta":{}},"./node_modules/react/node_modules/fbjs/lib/invariant.js":{"id":1,"meta":{}},"./node_modules/react/lib/Object.assign.js":{"id":2,"meta":{}},"./node_modules/react/node_modules/fbjs/lib/warning.js":{"id":3,"meta":{}}
    //省略相似代碼
  }
}

在webpack.config中使用dll要用到DllReferencePlugin,這個(gè)插件通過(guò)引用 dll 的 manifest 文件來(lái)把依賴的名稱映射到模塊的 id 上，之后再在需要的時(shí)候通過(guò)內(nèi)置的 webpack_require 函數(shù)來(lái) require 他們.

  new webpack.DllReferencePlugin({
    context: __dirname,
    manifest: require("./dist/dll/react.manifest.json")
  }),

第一步產(chǎn)出的manifest文件就用在這里，給主構(gòu)建流程作為查找dll的依據(jù)：DllReferencePlugin去 manifest.json 文件讀取 name 字段的值，把值的內(nèi)容作為在從全局變量中獲取動(dòng)態(tài)鏈接庫(kù)中內(nèi)容時(shí)的全局變量名，因此：在 webpack_dll.config.js 文件中，DllPlugin 中的 name 參數(shù)必須和 output.library 中保持一致。

生成的dll暴露出的是全局函數(shù)，因此還需要在入口文件里面引入對(duì)應(yīng)的dll文件。

首先從前面的介紹，至少可以看出dll的兩個(gè)作用

分離代碼，業(yè)務(wù)代碼和第三方模塊可以被打包到不同的文件里，這個(gè)有幾個(gè)好處：

避免打包出單個(gè)文件的大小太大，不利于調(diào)試

將單個(gè)大文件拆成多個(gè)小文件之后，一定情況下有利于加載（不超出瀏覽器一次性請(qǐng)求的文件數(shù)情況下，并行下載肯定比串行快）

提升構(gòu)建速度。第三方庫(kù)沒(méi)有變更時(shí)，由于我們只構(gòu)建業(yè)務(wù)相關(guān)代碼，相比全部重新構(gòu)建自然要快的多。

從前面可以看到dll帶來(lái)的優(yōu)點(diǎn)，但并不意味著我們就應(yīng)該把除業(yè)務(wù)代碼外的所有代碼全部都丟到dll中，舉一個(gè)例子：
1.對(duì)于lodash這種第三方庫(kù)，正確的用法是只去import所需的函數(shù)（用什么引什么），例如：

// 正確用法
import isPlainObject from "lodash/isPlainObject"

//錯(cuò)誤用法
import { isPlainObject } from "lodash"

這兩種寫(xiě)法的差別在于，打包時(shí)webpack會(huì)根據(jù)引用去打包依賴的內(nèi)容，所以第一種寫(xiě)法，webpack只會(huì)打包lodash的isPlainObject庫(kù)，第二種寫(xiě)法卻會(huì)打包整個(gè)lodash?，F(xiàn)在假設(shè)在項(xiàng)目中只是用到不同模塊對(duì)lodash里的某幾個(gè)函數(shù)并且沒(méi)有對(duì)于某個(gè)函數(shù)重復(fù)使用非常多次，那么這時(shí)候把lodash添加到dll中，帶來(lái)的收益就并不明顯，反而導(dǎo)致2個(gè)問(wèn)題：

由于打包了整個(gè)lodash，而導(dǎo)致打包后的文件總大小（注意是總大?。┍仍冗€要大

在dll打包太多內(nèi)容也需要耗費(fèi)時(shí)間，雖然我們一般只在第三方模塊更新之后才進(jìn)行重新預(yù)編譯（就是dll打包的過(guò)程），但是如果這個(gè)時(shí)間太長(zhǎng)的話體驗(yàn)也不好、

放一張自己在一個(gè)比較大的項(xiàng)目中單純使用dll之后的收益，提取的內(nèi)容是 react相關(guān)的第三方庫(kù)，和fish組件，構(gòu)建時(shí)間從120s降低到80s左右（當(dāng)然這個(gè)時(shí)間還是有點(diǎn)恐怖），構(gòu)建前appjs的大小是680kb，拆分業(yè)務(wù)代碼和第三方代碼分別是400kb和380kb（這就是拆分后大小大于拆分前大小的例子），從這一點(diǎn)來(lái)看，對(duì)于常見(jiàn)第三方庫(kù)是否要放進(jìn)dll可能比較明確（比如react系列打包一般肯定不虧），但是還有一些就要結(jié)合具體的項(xiàng)目?jī)?nèi)容來(lái)進(jìn)行判斷和取舍。（強(qiáng)烈推薦使用webpack-bundle-analyzer插件進(jìn)行性能分析）

本文介紹了Dllplugin的思想,基本用法和應(yīng)用場(chǎng)景(關(guān)于使用的部分更詳細(xì)的內(nèi)容可以看官方文檔)，結(jié)合個(gè)人的一些實(shí)踐經(jīng)驗(yàn)，對(duì)于常見(jiàn)第三方庫(kù)是否要放進(jìn)dll可能比較明確（比如react系列打包一般肯定不虧），但是還有一些就要結(jié)合具體的項(xiàng)目?jī)?nèi)容來(lái)判斷，例如我上面的實(shí)踐的例子就說(shuō)明目前的拆分還不夠好。這一塊也歡迎大家一起探討。如果內(nèi)容有錯(cuò)誤的地方歡迎指出（覺(jué)得看著不理解不舒服想吐槽也完全沒(méi)問(wèn)題）；如果對(duì)你有幫助，歡迎點(diǎn)贊和收藏，轉(zhuǎn)載請(qǐng)征得同意后著明出處，如果有問(wèn)題也歡迎私信交流，主頁(yè)有郵箱地址