vue项目过大，cdn加速vue项目

初次加载vue缓慢

很多小伙伴想必做vue项目的时候，会出初次加载速度缓慢的情况，拿我接盘公司的小项目说，会出现初次加载20s-60s的情况，然后自己看了下接盘的项目，打包后文件大小如下：

接盘项目打包后文件

其中最大的chunk-vendors文件，经过网上了解，这是第三方库的打包组合。其次js文件也很大。
可以看出就算经过gzip压缩也需要下载接近1M的下载量，拿一个同时在线人数300-400人来说，一般购买的服务器为5m带宽，所谓的5m带宽其实是625kb 的下载速度，项目更新后加载页面需要重新更新缓存下载完整项目，拿25个人上班重新打开网页加载完整项目来说，且大概计算gzip压缩后体积为1M，625kb/S 除以 25 ，则个人下载速度为25kb/S，loading的时间为40s，看着这速度已经吐了。

优化方案 vue.config.js

上cdn加速加载第三方包

业务代码是经常更新迭代的
为了让浏览器尽可能长的时间缓存我们的静态文件，如果把类库代码和业务代码打包在一起，那么类库代码会跟着业务代码的更新而更新，而不能长时间的是浏览器里缓存，希望利用缓存，减少浏览器流量，提高用户浏览器加载速度，所以单独拆分出来进行打包
一般第三方包都会有script引入方案，只需要打包的时候忽略制定第三方包，然后在模板上加上相应的导入链接。
首先没有vue.config.js需要在项目根目录创建
具体代码如下：

const cdn = {
    // 忽略打包的第三方库
    externals: {
      vue: 'Vue',
      "element-ui": "ELEMENT",
      'vue-router': 'VueRouter',
      vuex: 'Vuex',
      axios: 'axios',
      moment: "moment",
      echarts: "echarts"
    },
  
    // 通过cdn方式使用
    js: [
      'https://cdn.bootcss.com/vue/2.6.10/vue.runtime.min.js',
      'https://cdn.bootcss.com/vue-router/3.1.2/vue-router.min.js',
      'https://cdn.bootcss.com/vuex/3.1.1/vuex.min.js',
      'https://cdn.bootcss.com/axios/0.19.0/axios.min.js',
      'https://cdn.bootcss.com/moment.js/2.24.0/moment.min.js',
      'https://cdn.bootcss.com/echarts/3.7.1/echarts.min.js',
      "https://cdn.bootcdn.net/ajax/libs/element-ui/2.8.2/index.js",
    ],
  
    css: ["https://unpkg.com/element-ui@2.8.2/lib/theme-chalk/index.css"],
  }

module.exports = {
    publicPath: '/CRM/dist/',
    // publicPath: './',
    chainWebpack: config => {
        config.plugin('html').tap(args => {
            args[0].cdn = cdn
            return args
          })
          config.plugins.delete('prefetch')
    },
    //打包忽略第三方库
    configureWebpack: { 
        externals: cdn.externals
    },
}

然后在 pulic/index.html 模板相应位置上加上（添加位置自己看着来）

//下列是css ,script的话注释换一下，仔细看很好理解，config配置是添加一个cdn变量，然后在模板中遍历添加
 <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.css) { %>
    <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="stylesheet">
    <!-- <script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>" crossorigin="anonymous"></script> --> 
  <% } %>

坑点：比如我在打包后运行就出现ElementUI is not defined的报错
研究了一下Element-ui 然后发现script导入的代码如下：

Element-ui

可以发现他定义的变量为 ELEMENT 而我们在开发过程中mian.js采用官方推荐Vue.use(ElementUI)
更改后可以运行。
然后我们看结果

cdn

gzip之后是400kb减少了600kb，可以看出现在app.js逻辑代码计较大
(还有第三方库没上cdn不是最终结果，加上这是接盘准备重构的系统，所以比较臃肿)

路由懒加载

上图可以看出现在app.js逻辑代码还是比较大，而且js文件只有两个一看就是没拆分，直接上最简单路由懒加载，直接抄官方推荐就好，使用以下方式加载组件

const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')

结果

接盘代码真是难

记过gzip打包后算了算是115kb左右（还有一些库没上cdn），上了会更少。

有不对的地方，望留言指出，
后续随缘更新业务js代码拆分...