Vue SPA 首屏加载慢，有如下几种优化方案：
1.GZIP
2.Load-On-Demand
3.webpack-bundle-analyzer(splitChunks)
4.CDN
5.Route lazy loading
6.font icon library
7.Skeleton screen
1, gzip 是基于 webpack 的压缩来实现的，需要在 vue.config.js 里添加如下配置：
configureWebpack: () => ({
plugins: [
// If it is greater than 244kb, it will be compressed again
new CompressionWebpackPlugin({
filename: "[path].gz[query]",
algorithm: "gzip",
test: productionGzipExtensions,
threshold: 10240,
minRatio: 0.8
}),
]
})
该配置需要配合 前端部署 时所对应的 Nginx 配置文件里添加相应的配置才会有效：
gzip on;
gzip_static on;
gzip_min_length 1k;
gzip_buffers 4 16k;
gzip_http_version 1.1;
gzip_comp_level 9;
gzip_types text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php application/javascript application/json;
gzip_disable "MSIE [1-6]\.";
gzip_vary on;
2, Load-On-Demand 按需加载，这个真的很有效，为了避免三方依赖包过大，选择按需加载很有必要，能够减小编译后的包的大小以及加载时占用内存及带宽的多少。
下面举例如下：
1）Echarts 的按需引入
普通：
import echarts from "echarts";
按需：
import * as echarts from "echarts/lib/echarts";
import 'echarts/lib/chart/bar’
import 'echarts/lib/chart/line’
2) Crypto-js 的按需引入，这个依赖包其实还是挺大的，当我们选择如下按需引入后，可以减小至少50%
普通：
import CryptoJs from 'crypto-js'
按需：
import AES from "crypto-js/aes";
import Utf8 from "crypto-js/enc-utf8";
import ECB from "crypto-js/mode-ecb";
import Pkcs7 from "crypto-js/pad-pkcs7";
3，SplitChunksPlugin（https://webpack.js.org/guides/code-splitting/#splitchunksplugin）
就是将编译后生成的 chunks js 文件尽可能的拆分成小的 js 文件，一是避免该文件过大造成首次加载时间过长，二是有可能将不需要首屏加载的js 文件单独分离出来，避免在首屏加载时加载它。
config.optimization.splitChunks({
chunks: "all",
minSize: 20000, // The minimum volume of a newly disassembled chunk is also the forced splitting volume of an asynchronous chunk common module
maxAsyncRequests: 6, // The maximum number of asynchronous load modules that can be split
maxInitialRequests: 6, // The maximum number of entries and their synchronization dependencies that can be split
enforceSizeThreshold: 50000, // Force split volume thresholds and ignore other limits
cacheGroups: {
libs: { // Third party library
name: "chunk-libs",
test: /[\\/]node_modules[\\/]/,
priority: 10,
chunks: "initial" // Package only the third parties that are initially dependent on
},
vue: { // Vue Unpack separately
name: "chunk-vue",
test: /[\\/]node_modules[\\/]vue[\\/]/,
priority: 15 // Weight is greater than libs
},
vuex: { // Vuex Unpack separately
name: "chunk-vuex",
test: /[\\/]node_modules[\\/]vuex[\\/]/,
priority: 20 // Weight is greater than libs
},
vueRouter: { // Vue router Unpack separately
name: "chunk-vue-router",
test: /[\\/]node_modules[\\/]vue-router[\\/]/,
priority: 25 // Weight is greater than libs
},
}
})
priority 越大，优先级越高。
4, CDN 替代 node_modules 本地依赖
这个有一个问题就是如果你引用官方提供的 cdn url 很容易出现不稳定的情况，时而加载没问题，时而加载失败，导致无法使用。最好能够把相应的依赖包放在项目部署服务器里某个路径下，同源下生成对应的cdn url，能够保证稳定性。
5，Route lazy loading 路由懒加载 三种方式：
1）const HelloWorld=resolve=>{
require.ensure(['@/components/HelloWorld'],()=>{
resolve(require('@/components/HelloWorld'))
})
}
export default new Router({
routes:[{
{path:'./',
name:'HelloWorld',
component:HelloWorld
}
}]
})
2）component: resolve => require(['../pages/home/helloWorld'], resolve)
3）component: () => import(/* webpackChunkName: 'ImportFuncDemo' */ '../components/Foo’)
6，font icon library 字体图标库，避免引用大量小的图片，增加请求量
iconfont （https://www.iconfont.cn/）
import '@/assets/css/iconfont/iconfont.js';
import '@/assets/css/iconfont/iconfont.css';
7，Skeleton screen 骨架屏
在index.html 里自定义一个 预加载页面 层，然后在app.vue 里的 router-view 标签使用 @hook:created=fun
fun 是自定义方法，控制 预加载页面 层的隐藏。
