初次加载vue缓慢

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

接盘项目打包后文件

优化方案 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

cdn

路由懒加载

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

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

结果

接盘代码真是难

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

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