webpack實踐之DLLPlugin 和 DLLReferencePlugin的使用教程

更新時間：2019年06月10日 17:23:33 作者：璐松鼠

這篇文章主要介紹了webpack實踐之DLLPlugin 和 DLLReferencePlugin的使用教程，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值 ,需要的朋友可以參考下

DLLPlugin 和 DLLReferencePlugin的使用

DLLPlugin 和 DLLReferencePlugin 用某種方法實現(xiàn)了拆分 bundles，同時還大大提升了構建的速度。

1.首先build文件夾添加----webpack.dll.config.js:

var path = require("path");
var webpack = require("webpack");
module.exports = {
 // 要打包的模塊的數(shù)組
 entry: {
  vendor: ['vue/dist/vue.esm.js','vue-router']
 },
 output: {
  path: path.join(__dirname, '../static/js'), // 打包后文件輸出的位置
  filename: '[name].dll.js',// vendor.dll.js中暴露出的全局變量名。
  library: '[name]_library' // 與webpack.DllPlugin中的`name: '[name]_library',`保持一致。
 },
 plugins: [
  new webpack.DllPlugin({
   path: path.join(__dirname, '.', '[name]-manifest.json'),
   name: '[name]_library', 
   context: __dirname
  }),
 ]
};

2.在package.json的scripts里加上：

"dll": "webpack --config build/webpack.dll.config.js",

3.運行npm run dll 在static/js下生成vendor-manifest.json;

4.在build/webpack.base.conf.js里加上：

// 添加DllReferencePlugin插件
 plugins: [
  new webpack.DllReferencePlugin({
   context: __dirname,
   manifest: require('./vendor-manifest.json')
  })
 ],

5.然后在index.html中引入vendor.dll.js：

<div id="app"></div>
<script src="./static/js/vendor.dll.js"></script>

至此，配置之后的：

可以看到npm run build后的時間大幅度減少，在dist打包體積上也比之前的小。在項目優(yōu)化中，可以很大程度上加快項目的構建速度和減少項目的打包體積。

總結

以上所述是小編給大家介紹的webpack實踐之DLLPlugin 和 DLLReferencePlugin的使用教程，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復大家的！

您可能感興趣的文章:

根據(jù)分辯率調用不同的CSS.
根據(jù)分辯率調用不同的CSS....
2007-01-01
JavaScript實現(xiàn)網頁五子棋小游戲
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)網頁五子棋小游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-06-06
javascript從右邊截取指定字符串的三種實現(xiàn)方法
這篇文章主要介紹了javascript從右邊截取指定字符串的三種實現(xiàn)方法。需要的朋友可以過來參考下，希望對大家有所幫助
2013-11-11
IE與FireFox的JavaScript兼容問題解決辦法
本篇文章主要是對IE與FireFox的JavaScript兼容問題解決辦法進行了詳細的分析介紹，需要的朋友可以過來參考下，希望對大家有所幫助
2013-12-12
多個上傳文件用js驗證文件的格式和大小的方法(推薦)
下面小編就為大家?guī)硪黄鄠€上傳文件用js驗證文件的格式和大小的方法(推薦)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-03-03
JavaScript中for of和for in的區(qū)別詳解
對于初學者，我們或許只知道無論是for of還是for in他們都有一個功能那就是遍歷，至于具體的細節(jié)或許我們不是很清楚，那么接下來我們就來詳細的區(qū)分一下for of和for in他們之間的不同點和相同點,需要的朋友可以參考下
2023-06-06
原生Js頁面滾動延遲加載圖片實現(xiàn)原理及過程
頁面滾動加載事件，獲取元素在頁面里的top值根據(jù)滾動條的位置判斷何時顯示圖片；獲取元素集合加載過的圖片從集合里刪除，具體實現(xiàn)如下，感興趣的朋友各位可以參考下哈
2013-06-06
用原生JS獲取CLASS對象(很簡單實用)
這篇文章主要介紹了如何用原生JS獲取CLASS對象，看過dom編程藝術的朋友或許會知道的
2014-10-10
基于PHP pthreads實現(xiàn)多線程代碼實例
這篇文章主要介紹了基于PHP pthreads實現(xiàn)多線程代碼實例,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
2020-06-06
js原生方法被覆蓋,從新賦值原生的方法
下面小編就為大家分享一篇js原生方法被覆蓋,從新賦值原生的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-01-01