溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇文章為大家展示了怎么在vue項目中優化CDN加速，內容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。
項目根目錄運行
npm install webpack-bundle-analyzer --save-dev
在build/webpack.dev.conf.js中引入
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
plugins: [
new BundleAnalyzerPlugin()
]運行后顯示可以看到幾個大的js 下面是已經優化過后的截圖
像vue ，vue-router，vuex，axios，mint-ui，crypto-js
1.使用CDN資源
其作用是：當我們加載頁面時，需要將我們所需要的一些依賴加載到當前會話中然后再開始執行，如果我們首屏，模塊比較多是，需要等待的時間會比較長，而且。瀏覽器內存最多執行四十個進程，需要等到加載完前面的才能執行后面的代碼，如果我們采用cdn的方式來引入一些第三方資源，就可以緩解我們服務器的壓力，原理是將我們的壓力分給其他服務器點。
使用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外部擴展，通過這種方式引入依賴庫，不需要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 storeCryptoJS用來加密，在使用的地方直接引入。axios同理
import CryptoJS from 'crypto-js' .....
優化之前
優化之后
上述內容就是怎么在vue項目中優化CDN加速，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
