Webpack(七)：DllPlugin DllReferencePlugin提高構(gòu)建速度

一：什么是DllPlugin 和 DllReferencePlugin？作用是什么优床？

在使用webpack進行打包時候乏悄，對于依賴的第三方庫，比如vue陕凹，vuex等這些不會修改的依賴悍抑，我們可以讓它和我們自己編寫的代碼分開打包，這樣做的好處是每次更改我本地代碼的文件的時候杜耙，webpack只需要打包我項目本身的文件代碼搜骡，而不會再去編譯第三方庫，那么第三方庫在第一次打包的時候只打包一次佑女，以后只要我們不升級第三方包的時候记靡，那么webpack就不會對這些庫去打包，這樣的可以快速的提高打包的速度团驱。因此為了解決這個問題摸吠，DllPlugin 和DllReferencePlugin插件就產(chǎn)生了。

那么對于目前webpack社區(qū)來講嚎花，我們希望和自己編寫的代碼分離開的話寸痢，webpack社區(qū)提供了2種方案：
1. CommonsChunkPlugin
2. DLLPlugin

CommonsChunkPlugin插件每次打包的時候還是會去處理一些第三方依賴庫，只是它能把第三方庫文件和我們的代碼分開掉紊选，生成一個獨立的js文件啼止。但是它還是不能提高打包的速度。
DLLPlugin 它能把第三方庫代碼分離開兵罢，并且每次文件更改的時候献烦，它只會打包該項目自身的代碼。所以打包速度會更快卖词。
DLLPlugin 這個插件是在一個額外獨立的webpack設(shè)置中創(chuàng)建一個只有dll的bundle巩那，也就是說我們在項目根目錄下除了有webpack.config.js，還會新建一個webpack.dll.config.js文件此蜈。webpack.dll.config.js作用是把所有的第三方庫依賴打包到一個bundle的dll文件里面即横，還會生成一個名為 manifest.json文件。
該manifest.json的作用是用來讓 DllReferencePlugin 映射到相關(guān)的依賴上去的舶替。
DllReferencePlugin 這個插件是在webpack.config.js中使用的令境，該插件的作用是把剛剛在webpack.dll.config.js中打包生成的dll文件引用到需要的預(yù)編譯的依賴上來。什么意思呢顾瞪？就是說在webpack.dll.config.js中打包后比如會生成 vendor.dll.js文件和vendor-manifest.json文件舔庶，vendor.dll.js文件包含所有的第三方庫文件，vendor-manifest.json文件會包含所有庫代碼的一個索引陈醒，當在使用webpack.config.js文件打包DllReferencePlugin插件的時候惕橙，會使用該DllReferencePlugin插件讀取vendor-manifest.json文件，看看是否有該第三方庫钉跷。vendor-manifest.json文件就是有一個第三方庫的一個映射而已弥鹦。

所以說 第一次使用 webpack.dll.config.js 文件會對第三方庫打包，打包完成后就不會再打包它了爷辙，然后每次運行 webpack.config.js文件的時候彬坏，都會打包項目中本身的文件代碼，當需要使用第三方依賴的時候膝晾，會使用 DllReferencePlugin插件去讀取第三方依賴庫栓始。所以說它的打包速度會得到一個很大的提升。

二：在項目中如何使用 DllPlugin 和 DllReferencePlugin血当？

在使用之前幻赚，我們首先看下我們項目現(xiàn)在的整個目錄架構(gòu)如下：

### 目錄結(jié)構(gòu)如下：
demo1                                       # 工程名
|   |--- dist                               # 打包后生成的目錄文件             
|   |--- node_modules                       # 所有的依賴包
|   |--- js                                 # 存放所有js文件
|   | |-- demo1.js  
|   | |-- main.js                           # js入口文件
|   |--- webpack.config.js                  # webpack配置文件
|   |--- webpack.dll.config.js              # 打包第三方依賴的庫文件
|   |--- index.html                         # html文件
|   |--- styles                             # 存放所有的css樣式文件   
|   | |-- main.styl                         # main.styl文件   
|   | |-- index.styl                        
|   |--- .gitignore  
|   |--- README.md
|   |--- package.json
|   |--- .babelrc                           # babel轉(zhuǎn)碼文件

因此我們首先需要在我們的項目根目錄下創(chuàng)建一個 webpack.dll.config.js 文件。然后配置代碼如下：

const path = require('path');
const DllPlugin = require('webpack/lib/DllPlugin');

module.exports = {
  // 入口文件
  entry: {
    // 項目中用到該兩個依賴庫文件
    jquery: ['jquery'],
    echarts: ['echarts']
  },
  // 輸出文件
  output: {
    // 文件名稱
    filename: '[name].dll.js', 
    // 將輸出的文件放到dist目錄下
    path: path.resolve(__dirname, 'dist'),

    /*
     存放相關(guān)的dll文件的全局變量名稱臊旭，比如對于jquery來說的話就是 _dll_jquery, 在前面加 _dll
     是為了防止全局變量沖突落恼。
    */
    library: '_dll_[name]'
  },
  plugins: [
    // 使用插件 DllPlugin
    new DllPlugin({
      /*
       該插件的name屬性值需要和 output.library保存一致，該字段值离熏，也就是輸出的 manifest.json文件中name字段的值佳谦。
       比如在jquery.manifest文件中有 name: '_dll_jquery'
      */
      name: '_dll_[name]',

      /* 生成manifest文件輸出的位置和文件名稱 */
      path: path.join(__dirname, 'dist', '[name].manifest.json')
    })
  ]
};

DllPlugin 插件有三個配置項參數(shù)如下：
context(可選)： manifest文件中請求的上下文，默認為該webpack文件上下文滋戳。
name: 公開的dll函數(shù)的名稱钻蔑，和 output.library保持一致。
path: manifest.json 生成文件的位置和文件名稱胧瓜。

下面我們繼續(xù)看下 webpack.config.js 配置代碼如下：

首先引入文件如下代碼：

// 引入 DllReferencePlugin
const DllReferencePlugin = require('webpack/lib/DllReferencePlugin');

然后在插件中使用該插件矢棚，如下代碼：

module.exports = {
  plugins: [
    // 告訴webpack使用了哪些第三方庫代碼
    new DllReferencePlugin({
      // jquery 映射到j(luò)son文件上去
      manifest: require('./dist/jquery.manifest.json')
    }),
    new DllReferencePlugin({
      // echarts 映射到j(luò)son文件上去
      manifest: require('./dist/echarts.manifest.json')
    })
  ]
}

DllReferencePlugin項的參數(shù)有如下：

context: manifest文件中請求的上下文。
manifest: 編譯時的一個用于加載的JSON的manifest的絕對路徑府喳。
context: 請求到模塊id的映射(默認值為 manifest.content)
name: dll暴露的地方的名稱(默認值為manifest.name)
scope: dll中內(nèi)容的前綴蒲肋。
sourceType: dll是如何暴露的libraryTarget。

webpack.config.js 所有代碼如下：

const path = require('path');
// 提取css的插件
const ExtractTextPlugin = require('extract-text-webpack-plugin');

// 清除dist目錄下的文件
// const ClearWebpackPlugin = require('clean-webpack-plugin');

const webpack = require('webpack');

// 引入打包html文件
const HtmlWebpackPlugin = require('html-webpack-plugin');

// 引入 DllReferencePlugin
const DllReferencePlugin = require('webpack/lib/DllReferencePlugin');

module.exports = {
  // 入口文件
  entry: {
    main: './js/main.js'
  },
  output: {
    filename: '[name].js',
    // 將輸出的文件都放在dist目錄下
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        // 使用正則去匹配
        test: /\.styl$/,
        use: ExtractTextPlugin.extract({
          fallback: {
            loader: 'style-loader'
          },
          use: [
            {
              loader: 'css-loader',
              options: {}
            },
            {
              loader: 'postcss-loader',
              options: {
                ident: 'postcss',
                plugins: [
                  require('postcss-cssnext')(),
                  require('cssnano')(),
                  require('postcss-pxtorem')({
                    rootValue: 16,
                    unitPrecision: 5,
                    propWhiteList: []
                  }),
                  require('postcss-sprites')()
                ]
              }
            },
            {
              loader: 'stylus-loader',
              options: {}
            }
          ]
        })
      },
      {
        test: /\.(png|jpg)$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: '[name].[ext]'
        }
      },
      {
        test: /\.js$/,
        exclude: path.resolve(__dirname, 'node_modules'), // 排除文件
        loader: 'babel-loader'
      }
    ]
  },
  resolve: {
    extensions: ['*', '.js', '.json']
  },
  devtool: 'cheap-module-eval-source-map',
  devServer: {
    // contentBase: path.join(__dirname, "dist"),
    port: 8081,
    host: '0.0.0.0',
    headers: {
      'X-foo': '112233'
    },
    // hot: true,
    inline: true,
    // open: true,
    overlay: true,
    stats: 'errors-only'
  },
  plugins: [
    // new ClearWebpackPlugin(['dist']),
    new HtmlWebpackPlugin({
      template: './index.html' // 模版文件
    }),
    new ExtractTextPlugin({
      // 從js文件中提取出來的 .css文件的名稱
      filename: `main.css`
    }),
    // 告訴webpack使用了哪些第三方庫代碼
    new DllReferencePlugin({
      // jquery 映射到j(luò)son文件上去
      manifest: require('./dist/jquery.manifest.json')
    }),
    new DllReferencePlugin({
      // echarts 映射到j(luò)son文件上去
      manifest: require('./dist/echarts.manifest.json')
    })
  ]
};

執(zhí)行構(gòu)建：

最后一步就是構(gòu)建代碼了钝满，先生存第三方庫文件兜粘，因此我們運行如下命令：

webpack --config webpack.dll.config.js

為了方便，我們在package.json中scripts加如下代碼了：

"scripts": {
  "dev": "webpack-dev-server --progress --colors --devtool cheap-module-eval-source-map --hot --inline",
  "build": "webpack --progress --colors --devtool cheap-module-source-map",
  "build:dll": "webpack --config webpack.dll.config.js"
},

所以我們先運行 npm run build:dll 命令弯蚜，運行完成后孔轴，會在dist目錄下生存 echarts.dll.js, echarts.manifest.json,jquery.dll.js, jquery.manifest.json 文件。如下圖所示：

再看下打包兩個庫執(zhí)行的時間碎捺，如下所示：

xx.dll.js 文件代碼大概如下這個樣子路鹰，比如echarts.dll.js 代碼為例：

var _dll_echarts = (function(modules) {
  // ... 此處省略 webpackBootstrap 函數(shù)代碼
}([
  (function(module, exports, __webpack_require__) {
    // ID為0模塊對應(yīng)的代碼
  }),
  (function(module, exports, __webpack_require__) {
    // ID為1模塊對應(yīng)的代碼
  }),
  // ....... 很多模塊代碼
]));

那么 echarts.manifest.json 生存的代碼如下：

{
  "name": "_dll_echarts",
  "content": {
    "./node_modules/zrender/lib/core/util.js": {
      "id": 0,
      "meta": {}
    },
    "./node_modules/echarts/lib/echarts.js": {
      "id": 1,
      "meta": {}
    },
    "./node_modules/echarts/lib/util/graphic.js": {
      "id": 2,
      "meta": {}
    },
    // .....
  }
}

echarts.manifest.json 文件可以清楚的看到與其對應(yīng)的dll.js文件中包含了哪些模塊贷洲，以及每個模塊的路徑和ID。

如上打包完庫文件后晋柱，我們需要 運行 npm run build命令打包項目中文件了优构，如下dist目錄后的文件

然后我們查看index.html代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
<link href="main.css" rel="stylesheet"></head>
<body>
  <div id="app">22222</div>
  <div class="test1">12aaa</div>
  <div class='test2'>vvvvv</div>
<script type="text/javascript" src="main.js"></script></body>
</html>

可以看到j(luò)query文件沒有自動加上，因此需要我們手動加上雁竞，加上后代碼變成如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
<link href="main.css" rel="stylesheet"></head>
<body>
  <div id="app">22222</div>
  <div class="test1">12aaa</div>
  <div class='test2'>vvvvv</div>
<script type="text/javascript" src="jquery.dll.js"></script>
<script type="text/javascript" src="main.js"></script></body>
</html>

加上jquery.dll.js文件后钦椭，main.js入口文件的代碼如下：

require('../styles/main.styl');

const $ = require('jquery');
$('#app').html('歡迎你來我的博客');

console.log('這是main.js');
require('./demo1.js');

$('#app') 就可以操作元素了。

三：DllPlugin DllReferencePlugin使用在vue和vuex項目中

首先vuex-demo代碼可以查看github上的代碼了碑诉。然后我們在沒有使用 DllPlugin 插件時候彪腔，打包的速度如下，使用了十幾秒：

首先我們看下我們的入口文件 src/business/examine/app.js进栽，引入我們所安裝的靜態(tài)資源德挣，結(jié)果為：

import Vue from 'vue';
import VueRouter from 'vue-router';
import VueResource from 'vue-resource';
import App from './base/main';
import routerConfig from './router';
import store from './store';

// 主題樣式
import '../../components/common/common.styl';

Vue.config.devtools = true;

// Router
Vue.use(VueRouter);

// Resource
Vue.use(VueResource);

// 配置 resource
Vue.http.options.root = '';
Vue.http.options.emulateJSON = true;

const router = routerConfig(VueRouter);

new Vue(Vue.util.extend({
  router,
  store
}, App)).$mount('#app');

在store文件內(nèi)用到了vuex，如下代碼：

import Vue from 'vue';
import Vuex from 'vuex';

import state from './state';
import mutations from './mutations';
import actions from './actions';

Vue.use(Vuex);

export default new Vuex.Store({
  state,
  mutations,
  actions
});

如上代碼我們把vue和vue-router,vue-resource泪幌，vuex一起打包的盲厌。如上只是用到一些vue常見的插件，還沒有使用很多其他的插件祸泪，就耗時了十幾秒的時間吗浩，如果插件更多的話，那么相對來說耗時更長没隘，那么現(xiàn)在我們希望把 vue懂扼，vuex, vue-router, vue-resource這樣的在 webpack.dll.config.js中進行打包，然后再使用webpack.config.js打包本項目中的文件代碼右蒲；
還是和上面一樣在項目中根目錄下新建 webpack.dll.config.js阀湿，我把打包文件統(tǒng)一都放到build文件內(nèi)，配置代碼如下：

配置入口文件代碼：

module.exports = {
  entry: {
    // 項目中用到該依賴庫文件
    vendor: ['vue/dist/vue.esm.js', 'vue', 'vuex', 'vue-router', 'vue-resource']
  },
  plugins: [
    // 使用插件 DllPlugin
    new DllPlugin({
      /*
       該插件的name屬性值需要和 output.library保存一致瑰妄，該字段值陷嘴，也就是輸出的 manifest.json文件中name字段的值。
       比如在jquery.manifest文件中有 name: '_dll_jquery'
      */
      name: '_dll_[name]',

      /* 生成manifest文件輸出的位置和文件名稱 */
      path: path.resolve(__dirname, paths.dist, '[name].manifest.json')
    })
  ]
}

webpack.config.js 配置相關(guān)代碼如下：

// 引入 DllReferencePlugin
const DllReferencePlugin = require('webpack/lib/DllReferencePlugin');

module.exports = {
  plugins: [
    // 告訴webpack使用了哪些第三方庫代碼
    new DllReferencePlugin({
      // jquery 映射到j(luò)son文件上去
      manifest: require(path.resolve(__dirname, paths.dist, 'vendor.manifest.json'))
    }),
  ]
}

然后運行打包 npm run build 后间坐，打包的時間如下圖所示：

可以看到?jīng)]有使用 DllPlugin DllReferencePlugin 打包前灾挨，打包的時間需要12.5秒，使用了該插件后竹宋，僅僅需要4秒的時間劳澄，可見提高了8秒的打包時間。并且分了兩個文件蜈七，所有相關(guān)的vue的依賴都放在了vendor.dll.js內(nèi)秒拔，我們項目上相關(guān)的代碼放在了bundle.js內(nèi)，這樣就可以減少一個js文件非常大的問題飒硅。但是在頁面上需要引用 vendor.dll.js 文件了砂缩。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 人面猴
    序言：七十年代末作谚，一起剝皮案震驚了整個濱河市，隨后出現(xiàn)的幾起案子梯轻，更是在濱河造成了極大的恐慌食磕，老刑警劉巖尽棕，帶你破解...
    沈念sama閱讀 217,907評論 6贊 506
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件喳挑，死亡現(xiàn)場離奇詭異，居然都是意外死亡滔悉，警方通過查閱死者的電腦和手機伊诵，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,987評論 3贊 395
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來回官，“玉大人曹宴，你說我怎么就攤上這事∏柑幔” “怎么了笛坦？”我有些...
    開封第一講書人閱讀 164,298評論 0贊 354
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵，是天一觀的道長苔巨。 經(jīng)常有香客問我版扩，道長，這世上最難降的妖魔是什么侄泽？ 我笑而不...
    開封第一講書人閱讀 58,586評論 1贊 293
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任礁芦，我火速辦了婚禮，結(jié)果婚禮上悼尾，老公的妹妹穿的比我還像新娘柿扣。我一直安慰自己，他們只是感情好闺魏，可當我...
    茶點故事閱讀 67,633評論 6贊 392
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布未状。 她就那樣靜靜地躺著，像睡著了一般析桥。 火紅的嫁衣襯著肌膚如雪司草。 梳的紋絲不亂的頭發(fā)上，一...
    開封第一講書人閱讀 51,488評論 1贊 302
  • 城市分裂傳說
    那天烹骨，我揣著相機與錄音翻伺，去河邊找鬼。 笑死沮焕，一個胖子當著我的面吹牛吨岭，可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播峦树，決...
    沈念sama閱讀 40,275評論 3贊 418
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼辣辫，長吁一口氣：“原來是場噩夢啊……” “哼旦事！你這毒婦竟也來了？” 一聲冷哼從身側(cè)響起急灭，我...
    開封第一講書人閱讀 39,176評論 0贊 276
  • 萬榮殺人案實錄
    序言：老撾萬榮一對情侶失蹤姐浮，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后葬馋，有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體卖鲤，經(jīng)...
    沈念sama閱讀 45,619評論 1贊 314
  • ?護林員之死
    正文 獨居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,819評論 3贊 336
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年畴嘶，在試婚紗的時候發(fā)現(xiàn)自己被綠了蛋逾。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,932評論 1贊 348
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡窗悯，死狀恐怖区匣，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情蒋院，我是刑警寧澤亏钩，帶...
    沈念sama閱讀 35,655評論 5贊 346
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布，位于F島的核電站欺旧，受9級特大地震影響姑丑，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜切端，卻給世界環(huán)境...
    茶點故事閱讀 41,265評論 3贊 329
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一彻坛、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧踏枣，春花似錦昌屉、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,871評論 0贊 22
  • 一樁弒父案间驮，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至马昨，卻和暖如春竞帽，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背鸿捧。 一陣腳步聲響...
    開封第一講書人閱讀 32,994評論 1贊 269
  • 情欲美人皮
    我被黑心中介騙來泰國打工屹篓， 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留，地道東北人匙奴。 一個月前我還...
    沈念sama閱讀 48,095評論 3贊 370
  • 代替公主和親
    正文 我出身青樓堆巧，卻偏偏與公主長得像，于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子谍肤，可洞房花燭夜當晚...
    茶點故事閱讀 44,884評論 2贊 354