vue 首次进入首页加载缓慢解决方案

1.使用路由懒加载

方式有很多种，我采用如下：

注：webpackChunkName表示将打包后的放到一个模块中，使用后会减少生成的js个数

2.使用cdn

在打包后发现vendor.js 文件占用内存特别大，这里面主要是使用的一些第三方库，例如 vuex,vue-router,axios，elementUI 等文件

我们除了在使用过程中单个组件引用，还可以使用CDN 加载。

通过在index.html 中直接引入第三方资源来缓解我们服务器的压力，其原理是将我们的压力分给了其他服务器站点。

3.将打包后比较大的文件拆分

在第一次访问页面的时候发现需要加载三四秒，打开控制台一看，有一个文件接近4M，如图：

这个文件加载花了3秒多，于是想到把它拆分开加载速度也许会快点

  configureWebpack: config => {
    if (isProduction) {
      // 开启分离js
      config.optimization = {
        runtimeChunk: 'single',
        splitChunks: {
          chunks: 'all',
          maxInitialRequests: Infinity,
          minSize: 20000,
          cacheGroups: {
            vendor: {
              test: /[\\/]node_modules[\\/]/,
              name (module) {
                const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1]
                return `webpack.${packageName.replace('@', '')}`
              }
            }
          }
        }
      };
    }
  }