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

后面有其余优化再更新，不少东西是摸索理解的，仅供参考~