vue 優(yōu)化CDN加速的方法示例
代碼敲完，項(xiàng)目上線，然后就要與優(yōu)化相遇。
項(xiàng)目有搶購(gòu)的性質(zhì)content download 時(shí)間非常的長(zhǎng)加載慢的很，至此開(kāi)始前端優(yōu)化之旅
項(xiàng)目根目錄運(yùn)行
npm install webpack-bundle-analyzer --save-dev
在build/webpack.dev.conf.js中引入
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
plugins: [
new BundleAnalyzerPlugin()
]
運(yùn)行后顯示可以看到幾個(gè)大的js 下面是已經(jīng)優(yōu)化過(guò)后的截圖
像vue ，vue-router，vuex，axios，mint-ui，crypto-js
1.使用CDN資源
其作用是：當(dāng)我們加載頁(yè)面時(shí)，需要將我們所需要的一些依賴(lài)加載到當(dāng)前會(huì)話(huà)中然后再開(kāi)始執(zhí)行，如果我們首屏，模塊比較多是，需要等待的時(shí)間會(huì)比較長(zhǎng)，而且。瀏覽器內(nèi)存最多執(zhí)行四十個(gè)進(jìn)程，需要等到加載完前面的才能執(zhí)行后面的代碼，如果我們采用cdn的方式來(lái)引入一些第三方資源，就可以緩解我們服務(wù)器的壓力，原理是將我們的壓力分給其他服務(wù)器點(diǎn)。
使用cdn在index.html中引入
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script> <script src="http://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script> <script src="http://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script> <script src="http://cdn.bootcss.com/axios/0.17.1/axios.min.js"></script> <script src="https://cdn.bootcss.com/mint-ui/2.2.13/index.js"></script> <script src="https://cdn.bootcss.com/crypto-js/3.1.9/crypto-js.min.js"></script> <title></title> </head> <body> <div id="app"></div> <!-- built files will be auto injected --> </body> </html>
修改build/webpack.base.conf.js文件，externals外部擴(kuò)展，通過(guò)這種方式引入依賴(lài)庫(kù)，不需要webpack處理。
module.exports = {
...
externals: {
'vue': 'Vue', // 左側(cè)vue是我們自己引入時(shí)候要用的，右側(cè)是開(kāi)發(fā)依賴(lài)庫(kù)的主人定義的不能修改
'vue-router': 'VueRouter',
'vuex': 'Vuex',
'axios': 'axios',
'mint-ui': 'MINT',
'crypto-js': 'CryptoJS'
}
...
}
console.log(window) 打印出下圖
網(wǎng)上查了資料有的引入有的還是會(huì)引入有的沒(méi)有引入，拿mint-ui舉例，查到的資料在main.js有下面的引入，但是注釋掉之后還是可以正常使用mint-ui的組件，import VueRouter from 'vue-router' 也是可以注釋掉使用的，感覺(jué)是因?yàn)閣indow全局有了VueRouter,但是有個(gè)問(wèn)題就是eslint會(huì)報(bào)警告，所以就沒(méi)有注釋掉。如果理解有誤希望大家能指出我的錯(cuò)誤
import MINT from 'mint-ui' Vue.use(MINT)
main.js
import Vue from 'vue' // 沒(méi)有注釋掉是因?yàn)閙ain.js其他地方用到了Vue,如果沒(méi)有用到可以注釋掉 import App from './App' import router from './router' import store from './store'
router/index.js
// import Vue from 'vue' // 注釋掉
// Vue.use(VueRouter) // 注釋掉
import VueRouter from 'vue-router' // 文件中引入的時(shí)候用我們自己定義的vue-router
const appRouter = {
....
}
export default new VueRouter(appRouter)
store/index.js
// import Vue from 'vue' // 注釋掉
// Vue.use(Vuex) // 注釋掉
import Vuex from 'vuex'
const store = new Vuex.Store({
....
})
export default store
CryptoJS用來(lái)加密，在使用的地方直接引入。axios同理
import CryptoJS from 'crypto-js' .....
優(yōu)化之前
優(yōu)化之后
另外就是花點(diǎn)錢(qián)提高了下帶寬o(╯□╰)o
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue?select組件綁定的值為數(shù)字類(lèi)型遇到的問(wèn)題
這篇文章主要介紹了vue?select組件綁定的值為數(shù)字類(lèi)型遇到的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
Vue完整項(xiàng)目構(gòu)建(進(jìn)階篇)
這篇文章主要介紹了Vue完整項(xiàng)目構(gòu)建(進(jìn)階篇)的相關(guān)資料,需要的朋友可以參考下2018-02-02
深入理解vue.js雙向綁定的實(shí)現(xiàn)原理
vue.js是MVVM結(jié)構(gòu)的，同類(lèi)的還有AngularJs；至于MVC、MVP、MVVM的比較網(wǎng)上已經(jīng)有很多了，這樣不再重復(fù)。這篇文章將給大家深入的介紹vue.js雙向綁定的實(shí)現(xiàn)原理，有需要的朋友們可以參考借鑒，下面跟著小編一起來(lái)看看吧。2016-12-12
這篇文章主要為大家介紹了vue編譯器util工具使用方法示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
這篇文章主要為大家詳細(xì)介紹了Vue仿百度搜索功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-12-12
vue3無(wú)config文件夾打包后頁(yè)面空白問(wèn)題及解決
這篇文章主要介紹了vue3無(wú)config文件夾打包后頁(yè)面空白問(wèn)題及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
這篇文章介紹了Vue.js中v-on指令的用法，文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-03-03
vue+iview+less+echarts實(shí)戰(zhàn)項(xiàng)目總結(jié)
本篇文章是作者通過(guò)學(xué)習(xí)vue+iview+less+echarts制作一個(gè)小系統(tǒng)后，做的心得以及遇到的坑的總結(jié)，值得大家學(xué)習(xí)參考。2018-02-02
vue中路由跳轉(zhuǎn)的多種方式(和$router下路由跳轉(zhuǎn)的那幾個(gè)方法的區(qū)別)
Vue.js是一款流行的前端JavaScript框架,它提供了多種方式來(lái)實(shí)現(xiàn)路由跳轉(zhuǎn),本文給大家分享vue中路由跳轉(zhuǎn)的幾種方式（和$router下路由跳轉(zhuǎn)的那幾個(gè)方法的區(qū)別）,感興趣的朋友一起看看吧2023-11-11
elementUI table表格動(dòng)態(tài)合并的示例代碼
這篇文章主要介紹了elementUI table表格動(dòng)態(tài)合并的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05