閱讀目錄
一：什麼是DllPlugin 和 DllReferencePlugin？作用是什麼？
二：在專案中如何使用 DllPlugin 和 DllReferencePlugin？
三：DllPlugin DllReferencePlugin使用在vue和vuex專案中
一：什麼是DllPlugin 和 DllReferencePlugin？作用是什麼？
在使用webpack進行打包時候，對於依賴的第三方庫，比如vue，vuex等這些不會修改的依賴，我們可以讓它和我們自己編寫的程式碼分開打包，這樣做的好處是每次更改我原生程式碼的檔案的時候，webpack只需要打包我專案本身的檔案程式碼，而不會再去編譯第三方庫，那麼第三方庫在第一次打包的時候只打包一次，以後只要我們不升級第三方包的時候，那麼webpack就不會對這些庫去打包，這樣的可以快速的提高打包的速度。因此為了解決這個問題，DllPlugin 和 DllReferencePlugin外掛就產生了。
那麼對於目前webpack社群來講，我們希望和自己編寫的程式碼分離開的話，webpack社群提供了2種方案：
1. CommonsChunkPlugin
2. DLLPlugin
CommonsChunkPlugin 外掛每次打包的時候還是會去處理一些第三方依賴庫，只是它能把第三方庫檔案和我們的程式碼分開掉，生成一個獨立的js檔案。但是它還是不能提高打包的速度。
DLLPlugin 它能把第三方庫程式碼分離開，並且每次檔案更改的時候，它只會打包該專案自身的程式碼。所以打包速度會更快。
DLLPlugin 這個外掛是在一個額外獨立的webpack設定中建立一個只有dll的bundle，也就是說我們在專案根目錄下除了有webpack.config.js，還會新建一個webpack.dll.config.js檔案。webpack.dll.config.js作用是把所有的第三方庫依賴打包到一個bundle的dll檔案裡面，還會生成一個名為 manifest.json檔案。
該manifest.json的作用是用來讓 DllReferencePlugin 對映到相關的依賴上去的。
DllReferencePlugin 這個外掛是在webpack.config.js中使用的，該外掛的作用是把剛剛在webpack.dll.config.js中打包生成的dll檔案引用到需要的預編譯的依賴上來。什麼意思呢？就是說在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？
在使用之前，我們首先看下我們專案現在的整個目錄架構如下：
### 目錄結構如下： 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轉碼檔案
因此我們首先需要在我們的專案根目錄下建立一個 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'),
/*
存放相關的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 外掛有三個配置項引數如下：
context(可選)： manifest檔案中請求的上下文，預設為該webpack檔案上下文。
name: 公開的dll函式的名稱，和 output.library保持一致。
path: manifest.json 生成檔案的位置和檔名稱。
下面我們繼續看下 webpack.config.js 配置程式碼如下：
首先引入檔案如下程式碼：
// 引入 DllReferencePlugin const DllReferencePlugin = require('webpack/lib/DllReferencePlugin');
然後在外掛中使用該外掛，如下程式碼：
module.exports = { plugins: [ // 告訴webpack使用了哪些第三方庫程式碼 new DllReferencePlugin({ // jquery 對映到json檔案上去 manifest: require('./dist/jquery.manifest.json') }), new DllReferencePlugin({ // echarts 對映到json檔案上去 manifest: require('./dist/echarts.manifest.json') }) ] }
DllReferencePlugin項的引數有如下：
context: manifest檔案中請求的上下文。
manifest: 編譯時的一個用於載入的JSON的manifest的絕對路徑。
context: 請求到模組id的對映(預設值為 manifest.content)
name: dll暴露的地方的名稱(預設值為manifest.name)
scope: dll中內容的字首。
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 對映到json檔案上去
manifest: require('./dist/jquery.manifest.json')
}),
new DllReferencePlugin({
// echarts 對映到json檔案上去
manifest: require('./dist/echarts.manifest.json')
})
]
};
執行構建：
最後一步就是構建程式碼了，先生存第三方庫檔案，因此我們執行如下命令：
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 檔案。如下圖所示：
再看下打包兩個庫執行的時間，如下所示：
xx.dll.js 檔案程式碼大概如下這個樣子，比如echarts.dll.js 程式碼為例：
var _dll_echarts = (function(modules) { // ... 此處省略 webpackBootstrap 函式程式碼 }([ (function(module, exports, __webpack_require__) { // ID為0模組對應的程式碼 }), (function(module, exports, __webpack_require__) { // ID為1模組對應的程式碼 }), // ....... 很多模組程式碼 ]));
那麼 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 檔案可以清楚的看到與其對應的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>
可以看到jquery檔案沒有自動加上，因此需要我們手動加上，加上後程式碼變成如下：
<!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，引入我們所安裝的靜態資源，結果為：
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檔案內用到了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常見的外掛，還沒有使用很多其他的外掛，就耗時了十幾秒的時間，如果外掛更多的話，那麼相對來說耗時更長，那麼現在我們希望把 vue，vuex, vue-router, vue-resource這樣的在 webpack.dll.config.js中進行打包，然後再使用webpack.config.js打包本專案中的檔案程式碼；
還是和上面一樣在專案中根目錄下新建 webpack.dll.config.js，我把打包檔案統一都放到build檔案內，配置程式碼如下：
配置入口檔案程式碼：
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 配置相關程式碼如下：
// 引入 DllReferencePlugin const DllReferencePlugin = require('webpack/lib/DllReferencePlugin'); module.exports = { plugins: [ // 告訴webpack使用了哪些第三方庫程式碼 new DllReferencePlugin({ // jquery 對映到json檔案上去 manifest: require(path.resolve(__dirname, paths.dist, 'vendor.manifest.json')) }), ] }
然後執行打包 npm run build 後，打包的時間如下圖所示：
可以看到沒有使用 DllPlugin DllReferencePlugin 打包前，打包的時間需要12.5秒，使用了該外掛後，僅僅需要4秒的時間，可見提高了8秒的打包時間。並且分了兩個檔案，所有相關的vue的依賴都放在了vendor.dll.js內，我們專案上相關的程式碼放在了bundle.js內，這樣就可以減少一個js檔案非常大的問題。但是在頁面上需要引用 vendor.dll.js 檔案了。