如何在Webpack中使用dll功能

這期內(nèi)容當中小編將會給大家?guī)碛嘘P(guān)如何在Webpack中使用dll功能，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

我們構(gòu)建前端項目的時候，往往希望第三方庫（vendors）和自己寫的代碼可以分開打包，因為第三方庫往往不需要經(jīng)常打包更新。對此Webpack的文檔建議用CommonsChunkPlugin來單獨打包第三方庫。

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)
})

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

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

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

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

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

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

這么一來有幾個好處：

1. Dll打包以后是獨立存在的，只要其包含的庫沒有增減、升級，hash也不會變化，因此線上的dll代碼不需要隨著版本發(fā)布頻繁更新。

2. App部分代碼修改后，只需要編譯app部分的代碼，dll部分，只要包含的庫沒有增減、升級，就不需要重新打包。這樣也大大提高了每次編譯的速度。

3. 假設(shè)你有多個項目，使用了相同的一些依賴庫，它們就可以共用一個dll。

如何使用呢？

首先要先建立一個dll的配置文件，entry只包含第三方庫：

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的選項中，path是manifest文件的輸出路徑；name是dll暴露的對象名，要跟output.library保持一致；context是解析包路徑的上下文，這個要跟接下來配置的dll user一致。

運行Webpack，會輸出兩個文件一個是打包好的vendor.js，一個就是manifest.json，長這樣：

{
 "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將每個庫都進行了編號索引，之后的dll user可以讀取這個文件，直接用id來引用。

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的選項中，context需要跟之前保持一致，這個用來指導Webpack匹配manifest中庫的路徑；manifest用來引入剛才輸出的manifest文件。

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

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

速度快了，文件也小了。

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

如果有多個項目，使用相同的一套庫，你可以在打包的時候引用相同的manifest文件，這樣就可以在項目之間共享了。

上述就是小編為大家分享的如何在Webpack中使用dll功能了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道。