vue-cli4 打包和加载优化

vue在首次加载时，会出现加载很慢的情况，可以通过优化第三方库的引入方式来优化打包后的文件，本文提供了两种引入方式，对两种方式进行了对比

结论：
npm使用方便，但加载速度稍慢，对于小的库使用npm。
CDN+本地使用麻烦些，但加载速度快，对于一些很大的库可以使用，但要注意库的加载顺序问题

通过npm

// 安装
npm install echarts -S

// 使用
import echarts from 'echarts';

npm run build 后打包文件中chunk-vendors.js大概1.2M

npm run serve 后控制台中看到chunk-vendors.js有12M

通过CDN+本地

index.html中引入echarts

  <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts.common.min.js"></script>
  <!-- 如果echarts的CDN加载失败, 使用本地echarts-->
  <script>!window.echarts && document.write(unescape('%3Cscript%20src%3D%22%3C%25%3D%20BASE_URL%20%25%3Eecharts.common.min.js%22%3E%3C/script%3E'))</script>

上面的本地文件加密引入，在线加密工具

然后在 vue.config.js 中加上 externals 配置，这可以让你依然采用 import echarts from 'echarts'; 引入，也可以采用 window.echarts

module.exports = {
  configureWebpack: {
    externals: {
      echarts: 'echarts' // 配置使用CDN
    }
  }
};

npm run build 后打包文件中chunk-vendors.js只有317KB

npm run serve 后控制台中看到chunk-vendors.js变成4M