webpack實踐之DLLPlugin 和 DLLReferencePlugin的使用教程
DLLPlugin 和 DLLReferencePlugin的使用
DLLPlugin 和 DLLReferencePlugin 用某種方法實現(xiàn)了拆分 bundles，同時還大大提升了構(gòu)建的速度。
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)化中，可以很大程度上加快項目的構(gòu)建速度和減少項目的打包體積。
總結(jié)
以上所述是小編給大家介紹的webpack實踐之DLLPlugin 和 DLLReferencePlugin的使用教程，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復(fù)大家的！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)文字跑馬燈，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-12-12
事件機制是幾乎所有開發(fā)語言都有的機制，并不是deviceone的獨創(chuàng)，在某些語言稱之為消息(Event),有些地方稱之為(Message).接下來通過本文給大家介紹JS事件機制的理解 ，需要的朋友一起學(xué)習(xí)吧2023-04-04
es7學(xué)習(xí)教程之Decorators（修飾器）詳解
這篇文章主要給大家介紹了關(guān)于es7中Decorators（修飾器）的相關(guān)資料，文中通過示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面跟著小編一起來學(xué)習(xí)學(xué)習(xí)吧。2017-07-07
詳解XMLHttpRequest（二）響應(yīng)屬性、二進(jìn)制數(shù)據(jù)、監(jiān)測上傳下載進(jìn)度
這篇文章主要為大家詳細(xì)介紹了XMLHttpRequest響應(yīng)屬性、二進(jìn)制數(shù)據(jù)、監(jiān)測上傳下載進(jìn)度,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-09-09
一行代碼實現(xiàn)純數(shù)據(jù)json對象的深度克隆實現(xiàn)思路
今天整理了下資料，分析下為什么一句話可以實現(xiàn)純數(shù)據(jù)json對象的深度克隆,感興趣的朋友可以了解下哦2013-01-01
這篇文章主要為大家介紹了JS?可選鏈的三種形勢及好處詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
基于javascript實現(xiàn)瀏覽器滾動條快到底部時自動加載數(shù)據(jù)
這篇文章主要介紹了基于javascript實現(xiàn)瀏覽器滾動條快到底部時自動加載數(shù)據(jù)的相關(guān)資料,需要的朋友可以參考下2015-11-11
JavaScript實現(xiàn)帶箭頭標(biāo)識的多級下拉菜單效果
這篇文章主要介紹了JavaScript實現(xiàn)帶箭頭標(biāo)識的多級下拉菜單效果,可實現(xiàn)橫向與縱向箭頭的形式標(biāo)識選中菜單項位置的功能,涉及javascript針對頁面元素位置的判定與樣式動態(tài)操作技巧,需要的朋友可以參考下2015-08-08
在javascript開發(fā)中，js面試題是必問的一項，今天小編抽時間給大家整理些js常見的面試題，對js面試題相關(guān)知識感興趣的朋友一起看看吧2016-09-09
今天小編就為大家分享一篇layer彈出層顯示在top頂層的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09