vue首屏加载优化

vue首屏加载难免会有过慢的问题

解决方法可以有下面几点

1.固定模块，可以使用CDN

Axios、Element-ui这些基本上不会改变的依赖我们可以把它们用cdn导入，没有必要打包到vendor.js中。

1)在项目根目录index.html使用cdn节点导入

注意：引入的版本需要跟自己使用的版本兼容或相同

2)项目根目录下build/webpack.base.config.js中添加externals

externals: {
    'element-ui': 'element-ui',
    'axios':'axios',
}

2.开启gzip压缩支持

在项目config/index.js中可以开启gzip压缩，对打包优化也有很大的帮助
1)首先安装插件 compression-webpack-plugin

	npm install compression-webpack-plugin —save-dev 

2)设置productionGzip: true

// Gzip off by default as many popular static hosts such as
// Surge or Netlify already gzip all static assets for you.
// Before setting to `true`, make sure to:
// npm install --save-dev compression-webpack-plugin
productionGzip: true,
productionGzipExtensions: ['js', 'css'],

3)npm run build执行后会发现每个js和css文件会压缩一个gz后缀的文件夹，浏览器如果支持gzip 会自动查找有没有gz文件 找到了就加载gz然后本地解压 执行。

3.使用懒加载

当打包构建应用时，Javascript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。
路由也可以使用懒加载，之前我们是

import index from '@/components/index/index'
{ path: '/',name: 'index',component: index }

使用路由懒加载后的写法是

{ path: '/',name: 'index',component: () => import ('@/components/index/index') }

参考链接：https://router.vuejs.org/zh/guide/advanced/lazy-loading.html#把组件按组分块