关键词

NPM CDN Vue Highcharts 加速

Github

加载太慢

在做完整个项目之后，我把项目放到腾讯云服务器上（用的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好用，搜索方便

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

<body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
    <script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
  </body>
</html>

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中导出的名字

获得组件对外暴露的名称
这是花了我非常多时间去找各个组件对外暴露的名字，主要去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

<body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.13.1/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ant-design-vue@1.6.0/dist/antd.min.css">
    <script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
    <script src="https://cdn.bootcss.com/vue-router/3.1.1/vue-router.min.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.19.2/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/element-ui@2.13.1/lib/index.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/ant-design-vue@1.6.0/dist/antd.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/moment@2.24.0/moment.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/highcharts@8.0.4/highstock.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/highcharts-vue@1.3.5/dist/highcharts-vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/highcharts@8.0.4/indicators/indicators.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/highcharts@8.0.4/indicators/ema.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/highcharts@8.0.4/indicators/macd.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/highcharts@8.0.4/indicators/bollinger-bands.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios@0.19.2/dist/axios.min.js"></script>
  </body>

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,回车

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

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

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

在index.html使用cdn后

<script src="https://cdn.jsdelivr.net/npm/highcharts@8.0.4/indicators/macd.js"></script>

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

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

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

关键词

Github

加载太慢

解决方案

实际操作

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

关键词

Github

加载太慢

解决方案

实际操作

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