vue-cli3使用 DllPlugin 實(shí)現(xiàn)預(yù)編譯提升構(gòu)建速度
在項(xiàng)目打包上有兩個目標(biāo):減少打包代碼體積和加快打包速度
1. 減少打包體積:
(1)對于用的比較少的庫,可以去掉(我去掉了jquery以及l(fā)odash),用到的地方,參考源碼自己寫
(2)非用不可的又比較大的庫(我這里用了monaco-edit),使用cdn方式引入
打包體積減少的情況下,自然速度也會有所提升
2. 加快打包速度:
我目前做了這些:
(1)vue-cli2升級到vue-cli3,順便webpack2升級到webpack4,構(gòu)建速度一下子從3分鐘左右提升到不到1分鐘(vue-cli3升級過程 http://www.dbjr.com.cn/article/160146.htm
(2)使用 DllPlugin 進(jìn)行預(yù)編譯,過程如下:
· 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 (沒仔細(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)建過程忽略這些已預(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)建速度 ,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
如果你覺得本文對你有幫助,歡迎轉(zhuǎn)載,煩請注明出處,謝謝!
相關(guān)文章
使用Vue純前端實(shí)現(xiàn)發(fā)送短信驗(yàn)證碼并實(shí)現(xiàn)倒計(jì)時(shí)
在實(shí)際的應(yīng)用開發(fā)中,涉及用戶登錄驗(yàn)證、密碼重置等場景時(shí),通常需要前端實(shí)現(xiàn)發(fā)送短信驗(yàn)證碼的功能,以提升用戶體驗(yàn)和安全性,以下是一個簡單的前端實(shí)現(xiàn),演示了如何在用戶點(diǎn)擊發(fā)送驗(yàn)證碼按鈕時(shí)觸發(fā)短信驗(yàn)證碼的發(fā)送,并開始一個倒計(jì)時(shí)2024-04-04vue中使用jquery滑動到頁面底部的實(shí)現(xiàn)方式
這篇文章主要介紹了vue中使用jquery滑動到頁面底部的實(shí)現(xiàn)方式,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-12-12在vue中使用express-mock搭建mock服務(wù)的方法
這篇文章主要介紹了在vue中使用express-mock搭建mock服務(wù)的方法,文中給大家提到了在vue-test-utils 中 mock 全局對象的相關(guān)知識 ,需要的朋友可以參考下2018-11-11vue-cli webpack模板項(xiàng)目搭建及打包時(shí)路徑問題的解決方法
這篇文章主要介紹了vue-cli webpack模板項(xiàng)目搭建以及打包時(shí)路徑問題的解決方法,需要的朋友可以參考下2018-02-02如何測量vue應(yīng)用運(yùn)行時(shí)的性能
這篇文章主要介紹了如何測量vue應(yīng)用運(yùn)行時(shí)的性能,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,,需要的朋友可以參考下2019-06-06vue 頁面回退mounted函數(shù)不執(zhí)行的解決方案
這篇文章主要介紹了vue 頁面回退mounted函數(shù)不執(zhí)行的解決方案 ,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07v-show和v-if的區(qū)別?及應(yīng)用場景
這篇文章主要介紹了v-show和v-if的區(qū)別及應(yīng)用場景,vue中v-show與?v-if的作用效果是相同的,都能控制元素在頁面是否顯示,但是也有一定的區(qū)別,下面文章梳理總結(jié)v-show和v-if的區(qū)別,需要的小伙伴可以參考一下2022-06-06