最近使用Webpack遇到了一個(gè)坑。

我們構(gòu)建前端項(xiàng)目的時(shí)候，往往希望第三方庫(kù)（vendors）和自己寫的代碼可以分開(kāi)打包，因?yàn)榈谌綆?kù)往往不需要經(jīng)常打包更新。對(duì)此Webpack的文檔建議用CommonsChunkPlugin來(lái)單獨(dú)打包第三方庫(kù)。

entry: {
 vendor: ["jquery", "other-lib"],
 app: "./entry"
}
new CommonsChunkPlugin({
 name: "vendor",

 // filename: "vendor.js"
 // (Give the chunk a different name)

 minChunks: Infinity,
 // (with more entries, this ensures that no other module
 // goes into the vendor chunk)
})

通常為了對(duì)抗緩存，我們會(huì)給售出文件的文件名中加入hash的后綴——但是——我們編輯了app部分的代碼后，重新打包，發(fā)現(xiàn)vendor的hash也變化了！

這么一來(lái)，意味著每次發(fā)布版本的時(shí)候，vendor代碼都要刷新，即使我并沒(méi)有修改其中的代碼。這樣并不符合我們分開(kāi)打包的初衷。

帶著問(wèn)題我瀏覽了Github上的討論，發(fā)現(xiàn)了一個(gè)神器：dll。

Dll是Webpack最近新加的功能，我在網(wǎng)上并沒(méi)有找到什么中文的介紹，所以在這里我就簡(jiǎn)單介紹一下。

Dll這個(gè)概念應(yīng)該是借鑒了Windows系統(tǒng)的dll。一個(gè)dll包，就是一個(gè)純純的依賴庫(kù)，它本身不能運(yùn)行，是用來(lái)給你的app引用的。

打包dll的時(shí)候，Webpack會(huì)將所有包含的庫(kù)做一個(gè)索引，寫在一個(gè)manifest文件中，而引用dll的代碼（dll user）在打包的時(shí)候，只需要讀取這個(gè)manifest文件，就可以了。

這么一來(lái)有幾個(gè)好處：

1. Dll打包以后是獨(dú)立存在的，只要其包含的庫(kù)沒(méi)有增減、升級(jí)，hash也不會(huì)變化，因此線上的dll代碼不需要隨著版本發(fā)布頻繁更新。
2. App部分代碼修改后，只需要編譯app部分的代碼，dll部分，只要包含的庫(kù)沒(méi)有增減、升級(jí)，就不需要重新打包。這樣也大大提高了每次編譯的速度。
3. 假設(shè)你有多個(gè)項(xiàng)目，使用了相同的一些依賴庫(kù)，它們就可以共用一個(gè)dll。

如何使用呢？

首先要先建立一個(gè)dll的配置文件，entry只包含第三方庫(kù)：

const webpack = require('webpack');

const vendors = [
 'antd',
 'isomorphic-fetch',
 'react',
 'react-dom',
 'react-redux',
 'react-router',
 'redux',
 'redux-promise-middleware',
 'redux-thunk',
 'superagent',
];

module.exports = {
 output: {
  path: 'build',
  filename: '[name].[chunkhash].js',
  library: '[name]_[chunkhash]',
 },
 entry: {
  vendor: vendors,
 },
 plugins: [
  new webpack.DllPlugin({
   path: 'manifest.json',
   name: '[name]_[chunkhash]',
   context: __dirname,
  }),
 ],
};

webpack.DllPlugin的選項(xiàng)中，path是manifest文件的輸出路徑；name是dll暴露的對(duì)象名，要跟output.library保持一致；context是解析包路徑的上下文，這個(gè)要跟接下來(lái)配置的dll user一致。

運(yùn)行Webpack，會(huì)輸出兩個(gè)文件一個(gè)是打包好的vendor.js，一個(gè)就是manifest.json，長(zhǎng)這樣：

{
 "name": "vendor_ac51ba426d4f259b8b18",
 "content": {
  "./node_modules/antd/dist/antd.js": 1,
  "./node_modules/react/react.js": 2,
  "./node_modules/react/lib/React.js": 3,
  "./node_modules/react/node_modules/object-assign/index.js": 4,
  "./node_modules/react/lib/ReactChildren.js": 5,
  "./node_modules/react/lib/PooledClass.js": 6,
  "./node_modules/react/lib/reactProdInvariant.js": 7,
  "./node_modules/fbjs/lib/invariant.js": 8,
  "./node_modules/react/lib/ReactElement.js": 9,
  
  ............

Webpack將每個(gè)庫(kù)都進(jìn)行了編號(hào)索引，之后的dll user可以讀取這個(gè)文件，直接用id來(lái)引用。

Dll user的配置：

const webpack = require('webpack');

module.exports = {
 output: {
  path: 'build',
  filename: '[name].[chunkhash].js',
 },
 entry: {
  app: './src/index.js',
 },
 plugins: [
  new webpack.DllReferencePlugin({
   context: __dirname,
   manifest: require('./manifest.json'),
  }),
 ],
};

DllReferencePlugin的選項(xiàng)中，context需要跟之前保持一致，這個(gè)用來(lái)指導(dǎo)Webpack匹配manifest中庫(kù)的路徑；manifest用來(lái)引入剛才輸出的manifest文件。

運(yùn)行Webpack之后，結(jié)果如下：

對(duì)比一下不做分離的情況下打包的結(jié)果：

速度快了，文件也小了。

平時(shí)開(kāi)發(fā)的時(shí)候，修改代碼后重新編譯的速度會(huì)大大減少，節(jié)省時(shí)間。

如果有多個(gè)項(xiàng)目，使用相同的一套庫(kù)，你可以在打包的時(shí)候引用相同的manifest文件，這樣就可以在項(xiàng)目之間共享了。

參考：

https://webpack.github.io/docs/list-of-plugins.html#dllplugin

https://github.com/webpack/webpack/tree/master/examples/dll

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論