vue项目中使用CDN加载

npm run build 在项目打包的时候，所有的import导入的文件都会打包到js/chunk-vendors.31223dbd.js中 使用Vue ui 就会看到旁边存在! 就表示这个文件的体积大了。观察右边的依赖项就可以看到是哪些文件大了。

打开vue.config.js 凡是set里面都不会在打包的时候加载到js/chunk-vendors.31223dbd.js中 而是去全局中找

    chainWebpack: config => {
        config.set('externals', {
            'vue': 'Vue',
            'vue-router': 'VueRouter',
            'vuex': 'Vuex'
        })
    }

在全局index.html 引入对应的cdn上的资源 至于链接地址则需要去对应的官网去找了。

<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <!-- 引入组件库 -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/vue-router@3.4.3/dist/vue-router.js"></script>
  <script src="https://unpkg.com/vuex@3.5.1/dist/vuex.js"></script>

再次打包 （我个人从3.8M->2.7M） 可以看到js/chunk-vendors.31223dbd.js 小了不少