Vue 使用 CDN 减少打包体积

详细步骤

具体的步骤无需赘述了，index.html之中引入 CDN 的 script

    <!-- axios -->
    <script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.min.js"></script>
    <!-- Vue -->
    <script src="https://cdn.bootcss.com/vue/2.5.17/vue.min.js"></script>
    <!-- VueRouter -->
    <script src="https://cdn.bootcss.com/vue-router/3.0.2/vue-router.min.js"></script>
    <!-- ElementUI -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.4.11/index.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.4.11/theme-chalk/index.css" rel="stylesheet"/>

第二步在webpack里面配置externals:

  entry: {
    app: './src/main.js'
  },
  externals:{
    'vue': 'Vue',
    'vue-router': 'VueRouter',
    "axios":"axios",
    "ElementUI":"ELEMENT",
  },

最后从组件中删除 import xxx from vue之类的即可。
事实上不删也无所谓，webpack打包时自会略去这一部分(前提是与external中配置的名称一致)。

备用CDN

其实我想讲的是第二部分，书中(网上)只提使用CDN的方法，却对CDN故障以后的备用处理语焉不详。

查得一些处理方法，甚至有说利用 requireJs 来加载的，若是这样的话岂不是与使用CDN的初衷相悖了？

略微思考了一下，可以参照其他文章的 document.write 的方法进行处理

在这里我的处理方法是这样的

<script>
      /* Catch CDN Failed  */
      /* Vue */
      window.Vue || document.write('<script src="https://cdn.jsdelivr.net/npm/vue@2.5.18/dist/vue.min.js"><\/script>')
      /* axios */
      window.axios || document.write('<script src="https://cdn.jsdelivr.net/npm/axios@0.18.0/dist/axios.min.js"><\/script>')
      /* VueRouter */
      window.VueRouter || document.write('<script src="https://cdn.jsdelivr.net/npm/vue-router@3.0.2/dist/vue-router.min.js"><\/script>')
      /* Element */
      window.ELEMENT || document.write('<script src="https://cdn.jsdelivr.net/npm/element-ui@1.3.1/lib/index.js"><\/script>')
    </script>

对于 style 文件，需要提前配置，由于无法同步读取style文件的状态，onload事件又是异步的，因此通过onerror事件，提前指定处理函数即可。

    <script>
      /* Element_CSS */
      function getElementStyle(){
        let link = document.createElement('link');
        link.href = "https://cdn.jsdelivr.net/npm/element-ui@1.3.1/lib/theme-default/index.css";
        link.rel = "stylesheet"
        document.querySelector('script').parentNode.appendChild(link);
      }
    </script>

    <link href="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.4.11/theme-chalk/index.css" rel="stylesheet" onerror="getElementStyle()">

要注意的是，这里不可以使用document.write，因为文档大概率已经渲染完毕，使用write会直接清空当前文档，所以必须使用appendChild。

---

不久之前的 BootCDN 事件远近闻名，因此经过了一番考虑之后，才有了现在这篇总结