深入浅出的webpack构建工具---DllPlugin DllReferencePlugin提高构建速度(七)
閱讀目錄
一：什么是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: [// 使用插件 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 插件有三個配置項參數如下：
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') 就可以操作元素了。
github上查看demo
回到頂部三：DllPlugin DllReferencePlugin使用在vue和vuex項目中
?首先vuex-demo代碼可以查看github上的代碼了。然后我們在沒有使用 DllPlugin 插件時候，打包的速度如下，使用了十幾秒：
github查看demo
首先我們看下我們的入口文件 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: [// 使用插件 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 配置相關代碼如下：
// 引入 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 文件了。
轉載于:https://www.cnblogs.com/tugenhua0707/p/9520780.html
總結
以上是生活随笔為你收集整理的深入浅出的webpack构建工具---DllPlugin DllReferencePlugin提高构建速度(七)的全部內容，希望文章能夠幫你解決所遇到的問題。
