腳本之家服務器常用軟件

快捷導航

Vue如何使用cdn加載資源加快打包速度

更新時間：2022年05月26日 09:52:42 作者：努力搬磚的阿一

外部的庫文件,可以使用CDN資源,或者別的服務器資源等,下面這篇文章主要給大家介紹了關于Vue如何使用cdn加載資源加快打包速度的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下

為什么使用CDN

Vue項目打包的時候，默認會把所有代碼合并生產新文件,其中包括各種庫導致打包出來很大。如果使用cdn的話,會更利于程序的加載速度。

在Vue項目中，引入到工程中的所有js、css文件，編譯時都會被打包進vendor.js，瀏覽器在加載該文件之后才能開始顯示首屏。若是引入的庫眾多，那么vendor.js文件體積將會相當?shù)拇?，影響首開的體驗。

解決方法

將引用的外部js、css文件剝離開來，不編譯到vendor.js中，而是用資源的形式引用，這樣瀏覽器可以使用多個線程異步將vendor.js、外部的js等加載下來，達到加速首開的目的。

外部的庫文件，可以使用CDN資源，或者別的服務器資源等。

使用CDN主要解決兩個問題

打包時間太長、打包后代碼體積太大，請求慢
服務器網絡不穩(wěn)帶寬不高，使用cdn可以回避服務器帶寬問題

具體步驟

下面，以引入vue、vuex、vue-router為例，說明處理流程。

資源引入

1. 在項目根目錄index.html使用cdn節(jié)點導入

<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>
    <!--生產環(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外部擴展

configureWebpack: {
    externals: {
        "vue": "Vue",
        "vue-router": "VueRouter",
        "axios": "axios",
        "moment": "moment",
        "element-ui": "ELEMENT",
    }
},

這里解釋一下externals 配置選項的作用：

我們想引用一個庫，但是又不想讓webpack打包，并且又不影響我們在程序中以CMD、AMD或者window/global全局等方式進行使用，那就可以通過配置externals。

踩坑配置注意點：element-ui要大寫為ELEMENT

3. 去掉原有的引用

如果不刪除原先的import，項目還是會從node_modules中引入資源。
也就是說不刪的話，npm run build時候仍會將引用的資源一起打包，生成文件會大不少。所以我認為還是刪了好

打包對比

引入node_modules中模塊：可以看到element和moment占比大

CDN引入模塊：

能夠看到vendor.js文件大大減少，打包速度也快了不少

問題集 vue-cli 4使用report分析vendor.js

Vue Cli（@/vue/cli）自帶的webpack包體積優(yōu)化工具，它可以查看各個模塊的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。

注意：網上很多說要先安裝webpack-bundle-analyzer包，其實不需要安裝。

2. 運行npm run report 后，會在 build 的同時，在dist目錄會生成一個report.html，打開后可看到各文件占用大小

附：vue項目常用的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

總結

到此這篇關于Vue如何使用cdn加載資源加快打包速度的文章就介紹到這了,更多相關Vue使用cdn加載資源內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

Vue如何使用cdn加載資源加快打包速度

目錄

為什么使用CDN

解決方法

使用CDN主要解決兩個問題

具體步驟

資源引入

打包對比

附：vue項目常用的cdn地址

總結

相關文章

最新評論

大家感興趣的內容

最近更新的內容

常用在線小工具