怎么在vue項(xiàng)目中優(yōu)化CDN加速

發(fā)布時(shí)間：2021-04-07 16:43:08 來源：億速云閱讀：280 作者：Leah 欄目：web開發(fā)

本篇文章為大家展示了怎么在vue項(xiàng)目中優(yōu)化CDN加速，內(nèi)容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細(xì)介紹希望你能有所收獲。

項(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

怎么在vue項(xiàng)目中優(yōu)化CDN加速

1.使用CDN資源

其作用是：當(dāng)我們加載頁面時(shí)，需要將我們所需要的一些依賴加載到當(dāng)前會(huì)話中然后再開始執(zhí)行，如果我們首屏，模塊比較多是，需要等待的時(shí)間會(huì)比較長，而且。瀏覽器內(nèi)存最多執(zhí)行四十個(gè)進(jìn)程，需要等到加載完前面的才能執(zhí)行后面的代碼，如果我們采用cdn的方式來引入一些第三方資源，就可以緩解我們服務(wù)器的壓力，原理是將我們的壓力分給其他服務(wù)器點(diǎn)。

使用cdn在index.html中引入

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <script src="//cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
 <script src="//cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
 <script src="//cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script>
 <script src="//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ò)展，通過這種方式引入依賴庫，不需要webpack處理。

module.exports = {
 ...
 externals: {
 'vue': 'Vue', // 左側(cè)vue是我們自己引入時(shí)候要用的，右側(cè)是開發(fā)依賴庫的主人定義的不能修改
 '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)

怎么在vue項(xiàng)目中優(yōu)化CDN加速

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用來加密，在使用的地方直接引入。axios同理

import CryptoJS from 'crypto-js'
.....

優(yōu)化之前

怎么在vue項(xiàng)目中優(yōu)化CDN加速

優(yōu)化之后

怎么在vue項(xiàng)目中優(yōu)化CDN加速

上述內(nèi)容就是怎么在vue項(xiàng)目中優(yōu)化CDN加速，你們學(xué)到知識(shí)或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)

怎么在vue項(xiàng)目中優(yōu)化CDN加速

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽