vue cli2\3首屏优化加速——cdn引入element、JQ

了解

CDN的全称是Content Delivery Network，即内容分发网络。

原理：比如你在新疆访问百度服务器，很远网线长意味着花得时间久，但是我复制一个服务器在靠近新疆地方呢，是不是快很多？(由于成本、技术原因只能复制静态资源。)，你访问百度时候就会自动挑最近访问，进而提高访问速度。

CDN服务器遍布很广，像一个个大的快递超市，比如echarts/ui组件你不需要自己下载到本地，你发起请求让它配送给你。它会找最近的CDN服务器配送资源给你。从而达到提高加载速度。
（项目需要资源就那么多，1.从本地加载，2.请求过来。全堵一条路上就慢）

这些是入门级通俗理解，差不多够用了

作用

1.减小打包文件 vendor.js体积
2.首屏加载（显示）速度提高

代码

一、

在index.html文件里引入这些

<div id="app">
  <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
  <script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
  <script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script>
  <!-- <link rel="stylesheet" href="https://unpkg.com/element-ui@2.3.7/lib/theme-chalk/index.css"> -->
  <script src="https://cdn.bootcss.com/element-ui/2.3.3/index.js"></script>
  <script src="https://unpkg.com/element-ui@2.3.7/lib/index.js"></script>
  <script src="https://cdn.bootcss.com/echarts/4.2.1/echarts.min.js"></script>
  <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</div>

头部引入样式表

<!-- 要有具体版本号 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui@2.3.7/lib/theme-chalk/index.css">

二

三

去掉import，局部的还是全局的import。根据自己情况去掉。
然后依赖可以不删，为什么呢，因为你build没有把他们打包进去。

这里是cli3的（转载）

如果引入JQ，cli3中需要在该组件 import $ from ‘jquery’ ，然后配置文件是 ‘jquery’ : ‘$’ ，和cli2有点不同。踩坑啊。
记得也要在html引入第三行，不然会报错