Vue如何使用cdn加載資源加快打包速度
為什么使用CDN
Vue項(xiàng)目打包的時(shí)候，默認(rèn)會(huì)把所有代碼合并生產(chǎn)新文件,其中包括各種庫導(dǎo)致打包出來很大。如果使用cdn的話,會(huì)更利于程序的加載速度。
在Vue項(xiàng)目中，引入到工程中的所有js、css文件，編譯時(shí)都會(huì)被打包進(jìn)vendor.js，瀏覽器在加載該文件之后才能開始顯示首屏。若是引入的庫眾多，那么vendor.js文件體積將會(huì)相當(dāng)?shù)拇?，影響首開的體驗(yàn)。
解決方法
將引用的外部js、css文件剝離開來，不編譯到vendor.js中，而是用資源的形式引用，這樣瀏覽器可以使用多個(gè)線程異步將vendor.js、外部的js等加載下來，達(dá)到加速首開的目的。
外部的庫文件，可以使用CDN資源，或者別的服務(wù)器資源等。
使用CDN主要解決兩個(gè)問題
- 打包時(shí)間太長(zhǎng)、打包后代碼體積太大，請(qǐng)求慢
- 服務(wù)器網(wǎng)絡(luò)不穩(wěn)帶寬不高，使用cdn可以回避服務(wù)器帶寬問題
具體步驟
下面，以引入vue、vuex、vue-router為例，說明處理流程。
資源引入
1. 在項(xiàng)目根目錄index.html使用cdn節(jié)點(diǎn)導(dǎo)入
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
<!--開發(fā)環(huán)境-->
<script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>
<!--生產(chǎn)環(huán)境-->
<!--<script src="https://cdn.bootcss.com/vue/2.6.11/vue.min.js"></script>-->
<!-- 引入組件庫 -->
<script src="https://cdn.bootcss.com/vue-router/3.2.0/vue-router.min.js"></script>
<script src="https://cdn.bootcss.com/axios/0.23.0/axios.min.js"></script>
<script src="https://cdn.bootcss.com/element-ui/2.15.6/index.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
</body>
2. 在vue.config.js中加入externals外部擴(kuò)展
configureWebpack: {
externals: {
"vue": "Vue",
"vue-router": "VueRouter",
"axios": "axios",
"moment": "moment",
"element-ui": "ELEMENT",
}
},
這里解釋一下externals 配置選項(xiàng)的作用：
我們想引用一個(gè)庫，但是又不想讓webpack打包，并且又不影響我們?cè)诔绦蛑幸訡MD、AMD或者window/global全局等方式進(jìn)行使用，那就可以通過配置externals。
踩坑配置注意點(diǎn)：element-ui要大寫為ELEMENT
3. 去掉原有的引用
如果不刪除原先的import，項(xiàng)目還是會(huì)從node_modules中引入資源。
也就是說不刪的話，npm run build時(shí)候仍會(huì)將引用的資源一起打包，生成文件會(huì)大不少。所以我認(rèn)為還是刪了好
打包對(duì)比
引入node_modules中模塊：可以看到element和moment占比大
CDN引入模塊：
能夠看到vendor.js文件大大減少，打包速度也快了不少
問題集 vue-cli 4使用report分析vendor.js
Vue Cli（@/vue/cli）自帶的webpack包體積優(yōu)化工具，它可以查看各個(gè)模塊的size大小，方便優(yōu)化。只需要在build后面加上 --report 參數(shù)即可。
1. 我們把命令配置到package.json里
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"report": "vue-cli-service build --report" //加入該行
},
執(zhí)行npm run report 打包并生成report。
注意：網(wǎng)上很多說要先安裝webpack-bundle-analyzer包，其實(shí)不需要安裝。
2. 運(yùn)行npm run report 后，會(huì)在 build 的同時(shí)，在dist目錄會(huì)生成一個(gè)report.html，打開后可看到各文件占用大小
附：vue項(xiàng)目常用的cdn地址
1.axios
https://cdn.bootcss.com/axios/0.18.0/axios.min.js
2.swiper
- https://unpkg.com/swiper@5.3.8/css/swiper.css
- https://unpkg.com/swiper@5.3.8/js/swiper.js
- https://cdn.jsdelivr.net/npm/vue-awesome-swiper/dist/vue-awesome-swiper.js
< script type=“text/javascript”> Vue.use(window.VueAwesomeSwiper); < /script>
3.vue-router
https://cdn.bootcss.com/vue-router/3.0.2/vue-router.min.js
4.echarts
- https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js
- https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js
- https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js
- https://cdn.jsdelivr.net/npm/echarts/map/js/world.js
5.element-ui
https://unpkg.com/element-ui/lib/index.js
6.vue
- vue2:
https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js - vue3:
https://unpkg.com/vue@3.2.31/dist/vue.global.js
7.vant
- https://cdn.jsdelivr.net/npm/vant@next/lib/index.css
- https://cdn.jsdelivr.net/npm/vant@next/lib/vant.min.js
8.vuex
https://unpkg.com/vuex@next
9.moment
- https://cdn.jsdelivr.net/npm/moment@2.29.1/moment.min.js
- https://cdn.jsdelivr.net/npm/moment@2.29.1/locale/zh-cn.js
10.ant-design-vue
- https://cdn.jsdelivr.net/npm/ant-design-vue@1.7.2/dist/antd.min.css
- https://cdn.jsdelivr.net/npm/ant-design-vue@1.7.2/dist/antd.min.js
總結(jié)
到此這篇關(guān)于Vue如何使用cdn加載資源加快打包速度的文章就介紹到這了,更多相關(guān)Vue使用cdn加載資源內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了vue.js實(shí)現(xiàn)照片放大功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-06-06
這篇文章主要介紹了vue兩個(gè)組件間值的傳遞或修改的實(shí)現(xiàn)代碼，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-07-07
element?ui中的table表格數(shù)據(jù)是動(dòng)態(tài)生成的,最近遇到個(gè)需求,要求我們對(duì)單元格進(jìn)行合并,所以下面這篇文章主要給大家介紹了關(guān)于Element?UI中table單元格合并的解決過程,需要的朋友可以參考下2022-08-08
Vue源碼學(xué)習(xí)之?dāng)?shù)據(jù)初始化
這篇文章主要為大家介紹了Vue源碼學(xué)習(xí)之?dāng)?shù)據(jù)初始化實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
這篇文章主要介紹了VUE項(xiàng)目中SASS的使用及說明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
vue3?element?plus按需引入最優(yōu)雅的用法實(shí)例
這篇文章主要給大家介紹了關(guān)于vue3?element?plus按需引入最優(yōu)雅的用法,以及關(guān)于Element-plus按需引入的一些坑,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2022-03-03
以簡(jiǎn)單的樹形組件為案例,實(shí)現(xiàn)在組件中遞歸組件,下面這篇文章主要給大家介紹了關(guān)于Vue實(shí)現(xiàn)遞歸組件的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09
使用Vue.js和Flask來構(gòu)建一個(gè)單頁的App的示例
本篇文章主要介紹了使用Vue.js和Flask來構(gòu)建一個(gè)單頁的App的示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-03-03
vue-axios的使用以及axios請(qǐng)求賦值為空的問題
這篇文章主要介紹了vue-axios的使用以及axios請(qǐng)求賦值為空的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-04-04
Vue項(xiàng)目查看當(dāng)前使用的elementUI版本的方法
今天小編就為大家分享一篇Vue項(xiàng)目查看當(dāng)前使用的elementUI版本的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09