vue-cli3使用 DllPlugin 實(shí)現(xiàn)預(yù)編譯提升構(gòu)建速度
在項(xiàng)目打包上有兩個(gè)目標(biāo):減少打包代碼體積和加快打包速度
1. 減少打包體積:
(1)對(duì)于用的比較少的庫(kù),可以去掉(我去掉了jquery以及l(fā)odash),用到的地方,參考源碼自己寫
(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.dbjr.com.cn/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)文章
使用Vue純前端實(shí)現(xiàn)發(fā)送短信驗(yàn)證碼并實(shí)現(xiàn)倒計(jì)時(shí)
在實(shí)際的應(yīng)用開(kāi)發(fā)中,涉及用戶登錄驗(yàn)證、密碼重置等場(chǎng)景時(shí),通常需要前端實(shí)現(xiàn)發(fā)送短信驗(yàn)證碼的功能,以提升用戶體驗(yàn)和安全性,以下是一個(gè)簡(jiǎn)單的前端實(shí)現(xiàn),演示了如何在用戶點(diǎn)擊發(fā)送驗(yàn)證碼按鈕時(shí)觸發(fā)短信驗(yàn)證碼的發(fā)送,并開(kāi)始一個(gè)倒計(jì)時(shí)2024-04-04vue中使用jquery滑動(dòng)到頁(yè)面底部的實(shí)現(xiàn)方式
這篇文章主要介紹了vue中使用jquery滑動(dòng)到頁(yè)面底部的實(shí)現(xiàn)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-12-12vant開(kāi)發(fā)微信小程序安裝以及簡(jiǎn)單使用教程
這篇文章主要介紹了vant開(kāi)發(fā)微信小程序安裝以及簡(jiǎn)單使用教程,需要的朋友可以參考下2022-12-12在vue中使用express-mock搭建mock服務(wù)的方法
這篇文章主要介紹了在vue中使用express-mock搭建mock服務(wù)的方法,文中給大家提到了在vue-test-utils 中 mock 全局對(duì)象的相關(guān)知識(shí) ,需要的朋友可以參考下2018-11-11vue-cli webpack模板項(xiàng)目搭建及打包時(shí)路徑問(wèn)題的解決方法
這篇文章主要介紹了vue-cli webpack模板項(xiàng)目搭建以及打包時(shí)路徑問(wèn)題的解決方法,需要的朋友可以參考下2018-02-02如何測(cè)量vue應(yīng)用運(yùn)行時(shí)的性能
這篇文章主要介紹了如何測(cè)量vue應(yīng)用運(yùn)行時(shí)的性能,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,,需要的朋友可以參考下2019-06-06vue 頁(yè)面回退mounted函數(shù)不執(zhí)行的解決方案
這篇文章主要介紹了vue 頁(yè)面回退mounted函數(shù)不執(zhí)行的解決方案 ,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07v-show和v-if的區(qū)別?及應(yīng)用場(chǎng)景
這篇文章主要介紹了v-show和v-if的區(qū)別及應(yīng)用場(chǎng)景,vue中v-show與?v-if的作用效果是相同的,都能控制元素在頁(yè)面是否顯示,但是也有一定的區(qū)別,下面文章梳理總結(jié)v-show和v-if的區(qū)別,需要的小伙伴可以參考一下2022-06-06