vue-cli3使用 DllPlugin 實(shí)現(xiàn)預(yù)編譯提升構(gòu)建速度
在項(xiàng)目打包上有兩個(gè)目標(biāo)：減少打包代碼體積和加快打包速度
1. 減少打包體積：
（1）對(duì)于用的比較少的庫(kù)，可以去掉（我去掉了jquery以及l(fā)odash），用到的地方，參考源碼自己寫(xiě)
（2）非用不可的又比較大的庫(kù)（我這里用了monaco-edit），使用cdn方式引入
打包體積減少的情況下，自然速度也會(huì)有所提升
2. 加快打包速度：
我目前做了這些：
（1）vue-cli2升級(jí)到vue-cli3，順便webpack2升級(jí)到webpack4，構(gòu)建速度一下子從3分鐘左右提升到不到1分鐘（vue-cli3升級(jí)過(guò)程 http://www.dhdzp.com/article/160146.htm
（2）使用 DllPlugin 進(jìn)行預(yù)編譯，過(guò)程如下：
· npm install webpack-cli --save-d
· 獨(dú)立出一套webpack配置webpack.dll.conf，用dllPlugin定義要打包的dll文件；這里我在根目錄下新建webpack.dll.conf.js 內(nèi)容如下
const path = require("path");
const webpack = require("webpack");
module.exports = {
entry: {
vendor: [
"vue-router/dist/vue-router.esm.js",
"vuex/dist/vuex.esm.js",
"axios"
]
},
output: {
path: path.join(__dirname, "public/vendor"),
filename: "[name].dll.js",
library: "[name]_[hash]" // vendor.dll.js中暴露出的全局變量名
},
plugins: [
new webpack.DllPlugin({
path: path.join(__dirname, "public/vendor", "[name]-manifest.json"),
name: "[name]_[hash]",
context: process.cwd()
})
]
};
注意；在vue-cli3中一定要把生成的dll放到public中或者自己去配置publicPath （沒(méi)仔細(xì)看文檔掉進(jìn)坑）
· package.json中定義運(yùn)行webpack.dll.conf.js的命令
{
···
"scripts": {
"serve": "npm link typescript && vue-cli-service serve",
<strong>"dll": "webpack -p --progress --config ./webpack.dll.conf.js",</strong>
···
},
···
}
· 運(yùn)行npm run dll命令生成dll
· index.html中加載生成的dll文件
<script src="./vendor/vendor.dll.js"></script>
· 以上已經(jīng)完成預(yù)編譯并載入；但是一定不要忘記webpack構(gòu)建時(shí)告訴webpack哪些文件已被預(yù)編譯，使構(gòu)建過(guò)程忽略這些已預(yù)編譯的文件；
具體做法就是在vue.config.js的配置文件中添加
const webpack = require("webpack");
module.exports = {
···
configureWebpack: {
plugins: [
new webpack.DllReferencePlugin({
context: process.cwd(),
manifest: require("./public/vendor/vendor-manifest.json")
})
]
}
···
}
總結(jié)
以上所述是小編給大家介紹的vue-cli3使用 DllPlugin 實(shí)現(xiàn)預(yù)編譯提升構(gòu)建速度 ,希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺(jué)得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！
相關(guān)文章
這篇文章主要介紹了vm.$attrs使用場(chǎng)景詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
Vue中錯(cuò)誤圖片的處理的實(shí)現(xiàn)代碼
這篇文章主要介紹了Vue中錯(cuò)誤圖片的處理的實(shí)現(xiàn)代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
這篇文章主要介紹了vue傳值方式的十二種方法總結(jié),文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
這篇文章主要介紹了Vue獲取頁(yè)面元素的相對(duì)位置的方法示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
vue將某個(gè)組件打包成js并在其他項(xiàng)目使用
這篇文章主要給大家介紹了關(guān)于vue將某個(gè)組件打包成js并在其他項(xiàng)目使用的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-07-07
Vue分頁(yè)組件實(shí)現(xiàn)過(guò)程詳解
Web應(yīng)用程序中資源分頁(yè)不僅對(duì)性能很有幫助，而且從用戶(hù)體驗(yàn)的角度來(lái)說(shuō)也是非常有用的。在這篇文章中，將了解如何使用Vue創(chuàng)建動(dòng)態(tài)和可用的分頁(yè)組件2022-12-12
解決vue2中使用elementUi打包報(bào)錯(cuò)的問(wèn)題
這篇文章主要介紹了解決vue2中使用elementUi打包報(bào)錯(cuò)的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-09-09
Vue中使用回車(chē)鍵觸發(fā)事件的方法實(shí)現(xiàn)
本文主要介紹了Vue中使用回車(chē)鍵觸發(fā)事件的方法實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
Vue實(shí)現(xiàn)Tab標(biāo)簽路由效果并用Animate.css做轉(zhuǎn)場(chǎng)動(dòng)畫(huà)效果的代碼
這篇文章主要介紹了Vue實(shí)現(xiàn)Tab標(biāo)簽路由效果，并用Animate.css做轉(zhuǎn)場(chǎng)動(dòng)畫(huà)效果，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-07-07
關(guān)于Vue3路由push跳轉(zhuǎn)問(wèn)題(解決Vue2this.$router.push失效）
這篇文章主要介紹了Vue3路由push跳轉(zhuǎn)問(wèn)題(解決Vue2this.$router.push失效）,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-07-07