vue首屏加载很慢的优化

1. 关闭sourcemap

sourcemap是用来帮助线上调试代码、方便查看样式的，所以在打包后可以去掉。

修改位置：config/index.js

productionSourceMap: false;

2. 开启gzip压缩

这个优化是两方面的，前端将文件打包成.gz文件，然后通过nginx的配置，让浏览器直接解析.gz文件。

修改位置：config/index.js

productionGzip: false,
productionGzipExtensions: ['js', 'css'],

build/webpack.prod.conf.js

if (config.build.productionGzip) {
  const CompressionWebpackPlugin = require('compression-webpack-plugin')

  webpackConfig.plugins.push(
    new CompressionWebpackPlugin({
      asset: '[path].gz[query]',
      algorithm: 'gzip',
      test: new RegExp(
        '\\.(' +
        config.build.productionGzipExtensions.join('|') +
        ')$'
      ),
      threshold: 10240,
      minRatio: 0.8
    })
  )
}

3.vue-router使用懒加载

resolve => require(['./search.vue'], resolve);

4. 使用CDN引入库

减小代码体积、加快请求速度，不参与打包。
修改位置：index.html

<script src="https://cdn.bootcss.com/vue/2.5.3/vue.js"></script>
<script src="https://cdn.bootcss.com/vue-router/2.7.0/vue-router.min.js"></script>
<script src="https://cdn.bootcss.com/axios/0.17.1/axios.min.js"></script>
<link rel="stylesheet" href="https://cdn.bootcss.com/element-ui/2.4.0/theme-chalk/index.css">
<script src="https://cdn.bootcss.com/element-ui/2.4.0/index.js"></script>