Vue + 项目优化 通过externals加载外部CDN资源

问题：

        生成打包报告时，终端vue ui指令，通过可视化UI面板查看报告，在可视化的UI面板中，通过控制台和分析面板，看到项目中所存在的问题

• echarts,element-ui,quill等依赖项所占体积太大
• 控制台中显示，第三方依赖项占项目总资源的90%体积；速度统计面板，不同网络状态下，项目打开所消耗的时间都比较长；chunk-vendor.js文件占了1.9MB ，需要缩小这个文件的大小

原因：

        默认情况下，通过import语法导入的第三方依赖包，最终会被打包合并到同一个文件中，从而导致打包成功后，造成chunk-vendor.js单文件体积过大的问题

解决方法：

        第三方库启用CDN：1.vue.config.js中创建externals节点，通过externals加载外部CDN资源。2.在public/index.html文件的头部，添加CDN资源——css样式表和js文件引用，使得window全局查找并直接使用对象。

• 为了解决上述问题，可以通过webpack的externals节点，来配置并加载外部的CDN资源。只要把包名声明到externals节点中，最终，在webpack打包期间，就不会将对应的包合并到输出的文件中，而是去window全局查找并直接使用对象。凡是声明在externals中的第三方依赖包，都不会被打包，使得chunk-vendor.js缩小三倍。

具体步骤：

1.vue.config.js中创建externals节点

module.exports = {
  lintOnSave: false,
  chainWebpack: config => {
    //生产模式
    config.when(process.env.NODE_ENV === 'production', config => {
      config.entry('app').clear().add('./src/main-prod.js')
      
      config.set('externals', {
        vue: 'Vue',
        'vue-router': 'VueRouter',
        axios: 'axios',
        lodash: '_',
        echarts: 'echarts',
        nprogress: 'nProgress', 'vue-quill-editor': 'VueQuillEditor'
      })
    })
    //开发模式
    config.when(process.env.NODE_ENV === 'development', config => {
      config.entry('app').clear().add('./src/main-dev.js')
    })
  }
}

2.在public/index.html文件的头部，添加如下CDN资源——css样式表和js文件引用

<!-- nprogress 的样式表文件 -->
  <link rel="stylesheet" href="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.css" />
  <!-- 富文本编辑器 的样式表文件 -->
  <link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.core.min.css" />
  <link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.snow.min.css" />
  <link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.bubble.min.css" />
  <script src="https://cdn.staticfile.org/vue/2.5.22/vue.min.js"></script>
  <script src="https://cdn.staticfile.org/vue-router/3.0.1/vue-router.min.js"></script>
  <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
  <script src="https://cdn.staticfile.org/lodash.js/4.17.11/lodash.min.js"></script>
  <script src="https://cdn.staticfile.org/echarts/4.1.0/echarts.min.js"></script>
  <script src="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.js"></script>
  <!-- 富文本编辑器的 js 文件 -->
  <script src="https://cdn.staticfile.org/quill/1.3.4/quill.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue-quill-editor@3.0.4/dist/vue-quill-editor.js"></script>