vue 優(yōu)化CDN加速的方法示例
代碼敲完，項(xiàng)目上線，然后就要與優(yōu)化相遇。
項(xiàng)目有搶購(gòu)的性質(zhì)content download 時(shí)間非常的長(zhǎng)加載慢的很，至此開始前端優(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)化過后的截圖
像vue ，vue-router，vuex，axios，mint-ui，crypto-js
1.使用CDN資源
其作用是：當(dāng)我們加載頁(yè)面時(shí)，需要將我們所需要的一些依賴加載到當(dāng)前會(huì)話中然后再開始執(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ò)展，通過這種方式引入依賴庫(kù)，不需要webpack處理。
module.exports = {
...
externals: {
'vue': 'Vue', // 左側(cè)vue是我們自己引入時(shí)候要用的，右側(cè)是開發(fā)依賴庫(kù)的主人定義的不能修改
'vue-router': 'VueRouter',
'vuex': 'Vuex',
'axios': 'axios',
'mint-ui': 'MINT',
'crypto-js': 'CryptoJS'
}
...
}
console.log(window) 打印出下圖
網(wǎng)上查了資料有的引入有的還是會(huì)引入有的沒有引入，拿mint-ui舉例，查到的資料在main.js有下面的引入，但是注釋掉之后還是可以正常使用mint-ui的組件，import VueRouter from 'vue-router' 也是可以注釋掉使用的，感覺是因?yàn)閣indow全局有了VueRouter,但是有個(gè)問題就是eslint會(huì)報(bào)警告，所以就沒有注釋掉。如果理解有誤希望大家能指出我的錯(cuò)誤
import MINT from 'mint-ui' Vue.use(MINT)
main.js
import Vue from 'vue' // 沒有注釋掉是因?yàn)閙ain.js其他地方用到了Vue,如果沒有用到可以注釋掉 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)錢提高了下帶寬o(╯□╰)o
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Vue.js每天必學(xué)之計(jì)算屬性computed與$watch
Vue.js每天必學(xué)之計(jì)算屬性computed與$watch，為大家詳細(xì)講解計(jì)算屬性computed與$watch，感興趣的小伙伴們可以參考一下2016-09-09
這篇文章主要介紹了Vue-cli4 配置 element-ui 按需引入操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧2020-09-09
詳解從Vue.js源碼看異步更新DOM策略及nextTick
本篇文章主要介紹了從Vue.js源碼看異步更新DOM策略及nextTick，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一2017-10-10
這篇文章主要介紹了詳解Vue.js入門環(huán)境搭建，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。2017-03-03
keep-alive是Vue提供的一個(gè)抽象組件，用來(lái)對(duì)組件進(jìn)行緩存，從而節(jié)省性能，由于是一個(gè)抽象組件，所以在頁(yè)面渲染完畢后不會(huì)被渲染成一個(gè)DOM元素。這篇文章主要介紹了vue的keep-alive中使用EventBus的方法,需要的朋友可以參考下2019-04-04
這篇文章主要介紹了Vue中注冊(cè)全局組件的三種方式,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-11-11
這篇文章主要為大家詳細(xì)介紹了Vue自定義樹形控件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
vue 權(quán)限管理幾種實(shí)現(xiàn)方法
本文主要介紹了vue 權(quán)限管理幾種實(shí)現(xiàn)方法,權(quán)限需要前后端結(jié)合,前端盡可能的去控制,更多的需要后臺(tái)判斷,具有一定的參考價(jià)值,感興趣的可以了解一下2024-02-02
vue中數(shù)組常用的6種循環(huán)方法代碼示例
在vue項(xiàng)目開發(fā)中,我們需要對(duì)數(shù)組進(jìn)行處理等問題,這里簡(jiǎn)單記錄遍歷數(shù)組的幾種方法,這篇文章主要給大家介紹了關(guān)于vue中數(shù)組常用的6種循環(huán)方法,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-03-03
這篇文章主要介紹了前端漸進(jìn)式框架VUE的相關(guān)資料，文中講解的非常細(xì)致，幫助大家開始學(xué)習(xí)VUE，感興趣的朋友可以了解下2020-07-07