Webpack的dll功能使用

來源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 22:12:15

Webpack的dll功能使用

Webpack的dll功能使用:最近使用Webpack遇到了一個(gè)坑。我們構(gòu)建前端項(xiàng)目的時(shí)候，往往希望第三方庫（vendors）和自己寫的代碼可以分開打包，因?yàn)榈谌綆焱恍枰?jīng)常打包更新。對(duì)此Webpack的文檔建議用CommonsChunkPlugin來單獨(dú)打包第三方庫。 entry: { vendor

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀Webpack的dll功能使用:最近使用Webpack遇到了一個(gè)坑。我們構(gòu)建前端項(xiàng)目的時(shí)候，往往希望第三方庫（vendors）和自己寫的代碼可以分開打包，因?yàn)榈谌綆焱恍枰?jīng)常打包更新。對(duì)此Webpack的文檔建議用CommonsChunkPlugin來單獨(dú)打包第三方庫。 entry: { vendor

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

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

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也變化了！

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

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

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

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

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

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

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

如何使用呢？

首先要先建立一個(gè)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的選項(xiàng)中，path是manifest文件的輸出路徑；name是dll暴露的對(duì)象名，要跟output.library保持一致；context是解析包路徑的上下文，這個(gè)要跟接下來配置的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è)庫都進(jìn)行了編號(hào)索引，之后的dll user可以讀取這個(gè)文件，直接用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的選項(xiàng)中，context需要跟之前保持一致，這個(gè)用來指導(dǎo)Webpack匹配manifest中庫的路徑；manifest用來引入剛才輸出的manifest文件。

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