閱讀目錄

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

二：在項(xiàng)目中如何使用 DllPlugin 和 DllReferencePlugin？

三：DllPlugin DllReferencePlugin使用在vue和vuex項(xiàng)目中

回到頂部

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

? 在使用webpack進(jìn)行打包時(shí)候，對(duì)于依賴的第三方庫(kù)，比如vue，vuex等這些不會(huì)修改的依賴，我們可以讓它和我們自己編寫(xiě)的代碼分開(kāi)打包，這樣做的好處是每次更改我本地代碼的文件的時(shí)候，webpack只需要打包我項(xiàng)目本身的文件代碼，而不會(huì)再去編譯第三方庫(kù)，那么第三方庫(kù)在第一次打包的時(shí)候只打包一次，以后只要我們不升級(jí)第三方包的時(shí)候，那么webpack就不會(huì)對(duì)這些庫(kù)去打包，這樣的可以快速的提高打包的速度。因此為了解決這個(gè)問(wèn)題，DllPlugin 和 DllReferencePlugin插件就產(chǎn)生了。

那么對(duì)于目前webpack社區(qū)來(lái)講，我們希望和自己編寫(xiě)的代碼分離開(kāi)的話，webpack社區(qū)提供了2種方案：
1. CommonsChunkPlugin
2. DLLPlugin

CommonsChunkPlugin 插件每次打包的時(shí)候還是會(huì)去處理一些第三方依賴庫(kù)，只是它能把第三方庫(kù)文件和我們的代碼分開(kāi)掉，生成一個(gè)獨(dú)立的js文件。但是它還是不能提高打包的速度。

DLLPlugin 它能把第三方庫(kù)代碼分離開(kāi)，并且每次文件更改的時(shí)候，它只會(huì)打包該項(xiàng)目自身的代碼。所以打包速度會(huì)更快。

DLLPlugin 這個(gè)插件是在一個(gè)額外獨(dú)立的webpack設(shè)置中創(chuàng)建一個(gè)只有dll的bundle，也就是說(shuō)我們?cè)陧?xiàng)目根目錄下除了有webpack.config.js，還會(huì)新建一個(gè)webpack.dll.config.js文件。webpack.dll.config.js作用是把所有的第三方庫(kù)依賴打包到一個(gè)bundle的dll文件里面，還會(huì)生成一個(gè)名為 manifest.json文件。
該manifest.json的作用是用來(lái)讓 DllReferencePlugin 映射到相關(guān)的依賴上去的。

DllReferencePlugin 這個(gè)插件是在webpack.config.js中使用的，該插件的作用是把剛剛在webpack.dll.config.js中打包生成的dll文件引用到需要的預(yù)編譯的依賴上來(lái)。什么意思呢？就是說(shuō)在webpack.dll.config.js中打包后比如會(huì)生成 vendor.dll.js文件和vendor-manifest.json文件，vendor.dll.js文件包含所有的第三方庫(kù)文件，vendor-manifest.json文件會(huì)包含所有庫(kù)代碼的一個(gè)索引，當(dāng)在使用webpack.config.js文件打包DllReferencePlugin插件的時(shí)候，會(huì)使用該DllReferencePlugin插件讀取vendor-manifest.json文件，看看是否有該第三方庫(kù)。vendor-manifest.json文件就是有一個(gè)第三方庫(kù)的一個(gè)映射而已。

所以說(shuō) 第一次使用 webpack.dll.config.js 文件會(huì)對(duì)第三方庫(kù)打包，打包完成后就不會(huì)再打包它了，然后每次運(yùn)行 webpack.config.js文件的時(shí)候，都會(huì)打包項(xiàng)目中本身的文件代碼，當(dāng)需要使用第三方依賴的時(shí)候，會(huì)使用 DllReferencePlugin插件去讀取第三方依賴庫(kù)。所以說(shuō)它的打包速度會(huì)得到一個(gè)很大的提升。

回到頂部

二：在項(xiàng)目中如何使用 DllPlugin 和 DllReferencePlugin？

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

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

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

const path = require('path');
const DllPlugin = require('webpack/lib/DllPlugin');module.exports = {// 入口文件
  entry: {// 項(xiàng)目中用到該兩個(gè)依賴庫(kù)文件jquery: ['jquery'],echarts: ['echarts']},// 輸出文件
  output: {// 文件名稱filename: '[name].dll.js', // 將輸出的文件放到dist目錄下path: path.resolve(__dirname, 'dist'),/*存放相關(guān)的dll文件的全局變量名稱，比如對(duì)于jquery來(lái)說(shuō)的話就是 _dll_jquery, 在前面加 _dll是為了防止全局變量沖突。*/library: '_dll_[name]'},plugins: [// 使用插件 DllPluginnew 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 插件有三個(gè)配置項(xiàng)參數(shù)如下：
context(可選)： manifest文件中請(qǐng)求的上下文，默認(rèn)為該webpack文件上下文。
name: 公開(kāi)的dll函數(shù)的名稱，和 output.library保持一致。
path: manifest.json 生成文件的位置和文件名稱。

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

首先引入文件如下代碼：

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

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

module.exports = {plugins: [// 告訴webpack使用了哪些第三方庫(kù)代碼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項(xiàng)的參數(shù)有如下：

context: manifest文件中請(qǐng)求的上下文。
manifest: 編譯時(shí)的一個(gè)用于加載的JSON的manifest的絕對(duì)路徑。
context: 請(qǐng)求到模塊id的映射(默認(rèn)值為 manifest.content)
name: dll暴露的地方的名稱(默認(rèn)值為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文件中提取出來(lái)的 .css文件的名稱
      filename: `main.css`}),// 告訴webpack使用了哪些第三方庫(kù)代碼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)建代碼了，先生存第三方庫(kù)文件，因此我們運(yùn)行如下命令：

webpack --config webpack.dll.config.js

為了方便，我們?cè)趐ackage.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"
},

所以我們先運(yùn)行 npm run build:dll 命令，運(yùn)行完成后，會(huì)在dist目錄下生存 echarts.dll.js, echarts.manifest.json,jquery.dll.js, jquery.manifest.json 文件。如下圖所示：

再看下打包兩個(gè)庫(kù)執(zhí)行的時(shí)間，如下所示：

xx.dll.js 文件代碼大概如下這個(gè)樣子，比如echarts.dll.js 代碼為例：

var _dll_echarts = (function(modules) {// ... 此處省略 webpackBootstrap 函數(shù)代碼
}([(function(module, exports, __webpack_require__) {// ID為0模塊對(duì)應(yīng)的代碼
  }),(function(module, exports, __webpack_require__) {// ID為1模塊對(duì)應(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 文件可以清楚的看到與其對(duì)應(yīng)的dll.js文件中包含了哪些模塊，以及每個(gè)模塊的路徑和ID。

如上打包完庫(kù)文件后，我們需要 運(yùn)行 npm run build命令打包項(xiàng)目中文件了，如下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文件沒(méi)有自動(dòng)加上，因此需要我們手動(dòng)加上，加上后代碼變成如下：

<!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('歡迎你來(lái)我的博客');console.log('這是main.js');
require('./demo1.js');

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

github上查看demo

回到頂部

三：DllPlugin DllReferencePlugin使用在vue和vuex項(xiàng)目中

?首先vuex-demo代碼可以查看github上的代碼了。然后我們?cè)跊](méi)有使用 DllPlugin 插件時(shí)候，打包的速度如下，使用了十幾秒：

github查看demo

首先我們看下我們的入口文件 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常見(jiàn)的插件，還沒(méi)有使用很多其他的插件，就耗時(shí)了十幾秒的時(shí)間，如果插件更多的話，那么相對(duì)來(lái)說(shuō)耗時(shí)更長(zhǎng)，那么現(xiàn)在我們希望把 vue，vuex, vue-router, vue-resource這樣的在 webpack.dll.config.js中進(jìn)行打包，然后再使用webpack.config.js打包本項(xiàng)目中的文件代碼；
還是和上面一樣在項(xiàng)目中根目錄下新建 webpack.dll.config.js，我把打包文件統(tǒng)一都放到build文件內(nèi)，配置代碼如下：

配置入口文件代碼：

module.exports = {entry: {// 項(xiàng)目中用到該依賴庫(kù)文件vendor: ['vue/dist/vue.esm.js', 'vue', 'vuex', 'vue-router', 'vue-resource']},plugins: [// 使用插件 DllPluginnew 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使用了哪些第三方庫(kù)代碼new DllReferencePlugin({// jquery 映射到j(luò)son文件上去manifest: require(path.resolve(__dirname, paths.dist, 'vendor.manifest.json'))}),]
}

然后運(yùn)行打包 npm run build 后，打包的時(shí)間如下圖所示：

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

轉(zhuǎn)載于:https://www.cnblogs.com/tugenhua0707/p/9520780.html

總結(jié)

以上是生活随笔為你收集整理的深入浅出的webpack构建工具---DllPlugin DllReferencePlugin提高构建速度(七)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。