vue項目使用cdn加速減少webpack打包體積
更新時間：2022年08月17日 10:30:23 作者：shewlong
通過壓縮代碼的手段可減小網(wǎng)絡(luò)傳輸?shù)拇笮?但實際上最影響用戶體驗的還是網(wǎng)頁首次打開時的加載等待,其根本原因是網(wǎng)絡(luò)傳輸過程耗時較大,這篇文章主要給大家介紹了關(guān)于vue項目使用cdn加速減少webpack打包體積的相關(guān)資料,需要的朋友可以參考下
1.引入cdn資源?
<link rel="stylesheet" rel="external nofollow" /> <link rel="stylesheet" rel="external nofollow" />
<script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/vue-router@3.0.1/dist/vue-router.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/vuex@3.0.1/dist/vuex.min.js"></script> <script src="https://unpkg.com/element-ui@2.3.5/lib/index.js"></script> <script src="https://cdn.jsdelivr.net/npm/vant@1.1.2/lib/vant.min.js"></script> <script src="https://cdn.staticfile.org/axios/0.17.1/axios.min.js"></script>
?注：1.該文件為項目入口html文件，通常處于項目public目錄下或者項目根目錄下，使用了vant和elementUi,2.所以還應(yīng)該引入相對應(yīng)得css資源包3.cdn加速地址可以在官網(wǎng)中找到
代碼展示
2.在webpack基礎(chǔ)配置文件中加入externals配置，打包、編譯時去除cdn加速的模塊，可以大大壓縮打包后的壓縮包體積
externals: {
vue: 'Vue',
'vue-router': 'VueRouter',
"element-ui": "ElementUI",
'vant':"Vant",
axios: 'axios',
vuex: 'Vuex',
},
代碼展示
3.去除main.js中對以上模塊的引用，注冊
總結(jié)
到此這篇關(guān)于vue項目使用cdn加速減少webpack打包體積的文章就介紹到這了,更多相關(guān)vue使用cdn加速內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue引入elementUi后打開頁面報錯Uncaught?TypeError的解決方式
這篇文章主要給大家介紹了關(guān)于vue引入elementUi后打開頁面報錯Uncaught?TypeError:?Cannot?read?properties?of?undefined(reading?‘prototype‘)的解決方式,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08
在本文中我們給大家整理了關(guān)于Vue項目服務(wù)器部署之子目錄部署方法和具體步驟，需要的朋友們參考下。2019-05-05
vue+iview tabs context-menu 彈出框修改樣式的方法
今天遇到一個需求說頁面頂部的菜單右鍵彈出框離得有點遠(yuǎn),需要我們做調(diào)整,下面小編給大家分享下vue+iview tabs context-menu 彈出框修改樣式的方法,感興趣的朋友跟隨小編一起看看吧2024-06-06
vue使用require.context實現(xiàn)動態(tài)注冊路由
這篇文章主要介紹了vue使用require.context實現(xiàn)動態(tài)注冊路由的方法，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2020-12-12
這篇文章主要介紹了vuex分模塊后,實現(xiàn)獲取state的值，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要介紹了vue子組件通過.sync修飾符修改props屬性方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
vue2和vue3部署到服務(wù)器子目錄為空白頁問題及解決
這篇文章主要介紹了vue2和vue3部署到服務(wù)器子目錄為空白頁問題及解決,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
vue element動態(tài)渲染、移除表單并添加驗證的實現(xiàn)
這篇文章主要介紹了vue element動態(tài)渲染、移除表單并添加驗證的實現(xiàn)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-01-01
vue使用element實現(xiàn)上傳圖片和修改圖片功能
前幾天做到一個關(guān)于圖片上傳功能,下面這篇文章主要給大家介紹了關(guān)于vue使用element實現(xiàn)上傳圖片和修改圖片功能的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07
這篇文章主要為大家介紹了vue組件prop驗證作用示例解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08