vue 優(yōu)化CDN加速的方法示例
代碼敲完，項目上線，然后就要與優(yōu)化相遇。
項目有搶購的性質content download 時間非常的長加載慢的很，至此開始前端優(yōu)化之旅
項目根目錄運行
npm install webpack-bundle-analyzer --save-dev
在build/webpack.dev.conf.js中引入
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
plugins: [
new BundleAnalyzerPlugin()
]
運行后顯示可以看到幾個大的js 下面是已經優(yōu)化過后的截圖
像vue ，vue-router，vuex，axios，mint-ui，crypto-js
1.使用CDN資源
其作用是：當我們加載頁面時，需要將我們所需要的一些依賴加載到當前會話中然后再開始執(zhí)行，如果我們首屏，模塊比較多是，需要等待的時間會比較長，而且。瀏覽器內存最多執(zhí)行四十個進程，需要等到加載完前面的才能執(zhí)行后面的代碼，如果我們采用cdn的方式來引入一些第三方資源，就可以緩解我們服務器的壓力，原理是將我們的壓力分給其他服務器點。
使用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外部擴展，通過這種方式引入依賴庫，不需要webpack處理。
module.exports = {
...
externals: {
'vue': 'Vue', // 左側vue是我們自己引入時候要用的，右側是開發(fā)依賴庫的主人定義的不能修改
'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' .....
優(yōu)化之前
優(yōu)化之后
另外就是花點錢提高了下帶寬o(╯□╰)o
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了vue?select組件綁定的值為數字類型遇到的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了Vue完整項目構建(進階篇)的相關資料,需要的朋友可以參考下2018-02-02
vue.js是MVVM結構的，同類的還有AngularJs；至于MVC、MVP、MVVM的比較網上已經有很多了，這樣不再重復。這篇文章將給大家深入的介紹vue.js雙向綁定的實現原理，有需要的朋友們可以參考借鑒，下面跟著小編一起來看看吧。2016-12-12
這篇文章主要為大家介紹了vue編譯器util工具使用方法示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
這篇文章主要為大家詳細介紹了Vue仿百度搜索功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-12-12
這篇文章主要介紹了vue3無config文件夾打包后頁面空白問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
這篇文章介紹了Vue.js中v-on指令的用法，文中通過示例代碼介紹的非常詳細。對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-03-03
vue+iview+less+echarts實戰(zhàn)項目總結
本篇文章是作者通過學習vue+iview+less+echarts制作一個小系統(tǒng)后，做的心得以及遇到的坑的總結，值得大家學習參考。2018-02-02
vue中路由跳轉的多種方式(和$router下路由跳轉的那幾個方法的區(qū)別)
Vue.js是一款流行的前端JavaScript框架,它提供了多種方式來實現路由跳轉,本文給大家分享vue中路由跳轉的幾種方式（和$router下路由跳轉的那幾個方法的區(qū)別）,感興趣的朋友一起看看吧2023-11-11
elementUI table表格動態(tài)合并的示例代碼
這篇文章主要介紹了elementUI table表格動態(tài)合并的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-05-05