第九篇 使用CDN加速Vue的加载过程

关键词

NPM CDN Vue Highcharts 加速

Github

Stockspec_vue
网站入口

加载太慢

在做完整个项目之后，我把项目放到腾讯云服务器上（用的uwsgi+nginx，可能之后会写一篇），然后访问的时候，发现第一次加载特别慢，大概30s以上吧，然后再次访问链接就很快了。最开始我怀疑是不是因为我的网址解析花了很长时间，但是当我访问用uswgi直接设置Django的链接时，几乎是秒开。所以排除网址解析的问题，那会不会是前端Vue的问题呢，搜索了一下发现应该是，我的dist文件大概是3M+，配合腾讯云1M的小水管，慢就可以理解了。然后因为Cache的原因，第二次再访问链接时就不需要再下载前端的组件了。

解决方案

之前在开发Vue项目的时候，用的都是npm安装组件，比如element-ui， highcharts，这些都是比较大的js。在搜索了一下之后，发现最直接的解决方案是CDN(Content Delivery Network，即内容分发网络)，这样这些模块就不需要从我的小水管去获取了。

实际操作

知道解决方案之后，实际操作遇到很多问题，Vue和Element-ui的方案是最简单的，基本用搜索引擎都能找到。剩下的Antd，highcharts都遇到了问题（不知道到底怎么引入模块），不过最后还是解决了，现在访问自己的网站基本上是秒开了。

1.常用CND
https://www.jsdelivr.com/
https://www.bootcss.com/
个人觉得jsdelivr好用，搜索方便

2. 引入
   主要是两个位置，以Vue为例
   a) 项目文件夹下 src/index.html，添加CND路径

b) 项目文件夹下 build/webpack.base.conf.js文件，在module.exports的externals添加组件
参考https://segmentfault.com/a/1190000015709430

module.exports = {
  context: path.resolve(__dirname, '../'),
  entry: {
    app: './src/main.js'
  },
  externals:{
    'vue': 'Vue',
  }
}

这里的'vue': 'Vue'， 第一个是在项目中引用时要用到的名字，第二个'Vue'是Vue.js中导出的名字

3. 获得组件对外暴露的名称
   这是花了我非常多时间去找各个组件对外暴露的名字，主要去js中寻找，比如 exports.xxx，这个在Element-UI和Ant-Design里找到的是 ELEMENT和antd，但是在找 Highcharts时遇到了问题。
   关于Highcharts中highstock的cdn用法，官网给出的是https://www.highcharts.com.cn/docs/start-download
   仔细研究的话其实还是能找到的，但是我一直被困在 "highcharts/highstock"这个用法中。实际上highstock.js 的导出名也是 highcharts.

最后所有的组件
index.html

webpack.base.conf.js

externals:{
    'vue': 'Vue',
    'vue-router': 'VueRouter',
    'axios': 'axios',
    'element-ui': 'ELEMENT',
    'ant-design-vue': 'antd',
    "moment": "moment",
    "highcharts":"Highcharts",
    "highcharts-vue":"HighchartsVue"
}

在main.js中

import App from './App'
import router from './router'

import HighchartsVue from 'highcharts-vue'
import Highcharts from 'highcharts'

Vue.use(HighchartsVue)    #必须，我也不知道为什么

在自己搞定之后，我又搜索了一下到底怎么从js里找导出名，不过没有啥好方法。如果有了解的可以私聊或者评论怎么找。
后来找到一个很简单直接的办法：
引完cdn后打开当前开发网页,调出console面板,输入window,回车

这里的名字就是各个组件对外暴露的名字

4. Highstock 引入后技术指标的问题
   之前用npm引入的时候

import macd from "highcharts/indicators/macd";
macd(Highcharts);

在index.html使用cdn后

main.js中import macd和 macd(Highcharts) 全都删掉，不需要了，直接生效