Vue生产环境优化

2019-07-27

项目发布后发现访问灰常缓慢。虽然我的服务器带宽不高，100K，但是这个访问速度也太捉急了。
经过浏览器调试，发现vendor.js过大，其实也才1M，但是对于我的带宽来说大了点，就要考虑优化了。

参考：https://blog.csdn.net/hanghangaidoudou/article/details/81098717

可优化资源

经过分析，可优化的第三方插件有

element-ui
axios
echarts

vue

获取CDN源:https://www.bootcdn.cn/

优先通过官方的途径来获取CDN，虽然访问速度不一定是最快的，起码是最稳定的。一步一步来嚒。

- vue
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
- elementui:官网貌似没有提供CDN:特别说明，main.js中，elemntui相关的配置需要删掉，怀疑和Vue.use()有关。
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-default/index.css">
<script src="https://unpkg.com/element-ui@2.11.1/lib/index.js"></script>
- axios
<script src="https://cdn.bootcss.com/axios/0.19.0/axios.min.js"></script>
- echarts
<script src="https://cdn.bootcss.com/echarts/4.2.1/echarts-en.common.min.js"></script>
- vue-router的优化失败了，稍后再尝试吧。

配置index.html

在index.html中将你所需的第三方库的链接加载进来,如下:

<body>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-default/index.css">
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui@2.11.1/lib/index.js"></script>
<script src="https://cdn.bootcss.com/axios/0.19.0/axios.min.js"></script>
<script src="https://cdn.bootcss.com/echarts/4.2.1/echarts-en.common.min.js"></script>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>

配置webpack

开发环境还是从本地加载，生产版本改为CND。

webpack.prod.conf.js增加
    externals: {
        vue: 'Vue',                 //对应main.js:    import Vue from 'vue'
    },

“https://cdn.bootcss.com/axios/0.19.0/axios.min.js">

echarts

vue-router的优化失败了，稍后再尝试吧。


### 配置index.html
在index.html中 将你所需的第三方库的链接加载进来,如下:

```html
<body>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-default/index.css">
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui@2.11.1/lib/index.js"></script>
<script src="https://cdn.bootcss.com/axios/0.19.0/axios.min.js"></script>
<script src="https://cdn.bootcss.com/echarts/4.2.1/echarts-en.common.min.js"></script>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>

配置webpack

开发环境还是从本地加载，生产版本改为CND。
`text