vue 優化CDN加速

時間 2019-11-08

原文原文鏈接

代碼敲完，項目上線，而後就要與優化相遇。

項目有搶購的性質content download 時間很是的長加載慢的很，至此開始前端優化之旅css

項目根目錄運行html

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
vue

1.使用CDN資源

使用cdn在index.html中引入webpack

<!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處理。ios

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會報警告，因此就沒有註釋掉。若是理解有誤但願你們能指出個人錯誤web

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

main.jsvue-router

import Vue from 'vue' // 沒有註釋掉是由於main.js其餘地方用到了Vue,若是沒有用到能夠註釋掉
import App from './App'
import router from './router'
import store from './store'

router/index.jsvuex

// import Vue from 'vue' // 註釋掉
// Vue.use(VueRouter) // 註釋掉
import VueRouter from 'vue-router' // 文件中引入的時候用咱們本身定義的vue-router
const appRouter = {
....
}
export default new VueRouter(appRouter)

store/index.jsnpm

// 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'
.....

優化以前

優化以後

另外就是花點錢提升了下帶寬o(╯□╰)o

後面有其餘優化再更新，不少東西是摸索理解的，僅供參考~

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。