怎么在vue項目中優化CDN加速

npm install webpack-bundle-analyzer --save-dev

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
 plugins: [
 new BundleAnalyzerPlugin()
 ]

修改build/webpack.base.conf.js文件，externals外部擴展，通過這種方式引入依賴庫，不需要webpack處理。

module.exports = {
 ...
 externals: {
 'vue': 'Vue', // 左側vue是我們自己引入時候要用的，右側是開發依賴庫的主人定義的不能修改
 'vue-router': 'VueRouter',
 'vuex': 'Vuex',
 'axios': 'axios',
 'mint-ui': 'MINT',
 'crypto-js': 'CryptoJS'
 }
 ...
}

console.log(window) 打印出下圖

網上查了資料有的引入有的還是會引入有的沒有引入，拿mint-ui舉例，查到的資料在main.js有下面的引入，但是注釋掉之后還是可以正常使用mint-ui的組件，import VueRouter from 'vue-router' 也是可以注釋掉使用的，感覺是因為window全局有了VueRouter,但是有個問題就是eslint會報警告，所以就沒有注釋掉。如果理解有誤希望大家能指出我的錯誤

import MINT from 'mint-ui'
Vue.use(MINT)

main.js

import Vue from 'vue' // 沒有注釋掉是因為main.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' // 文件中引入的時候用我們自己定義的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'
.....

優化之前

優化之后

上述內容就是怎么在vue項目中優化CDN加速，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注創新互聯行業資訊頻道。