vue首页白屏的原因是打包后的js和css文件过大，浏览器初次访问网址时，会先去加载该项目的js和css文件，加载完成后才会进行页面渲染，因此，如果打包后的js或者css过大的话，加载时间变长，从而造成了视觉上的页面白屏，所以我解决首页白屏问题的思路是从减小js和css文件的大小入手

路由懒加载

1. 未懒加载的路由

import Index from '@/views/index'

routes:[ {
    path: '/index', 
    name: 'index', 
    component: Index 
    
}]

2. 懒加载的路由

const Index  = () => import('@/views/index') 

routes:[ {
    path: '/index', 
    name: 'index', 
    component: Index 
    
}]

当路由未使用懒加载时，打包后仅有一个命名为app.*******.js的js文件和一个命名为app.*****.css的css文件，使用懒加载后，打包后会根据路由生成多个js和css文件，当访问到对应的路由时，才会去加载对应的文件

依赖包按需加载

以elelemt ui为例，尽量采用按需加载的方式引入element ui，这样能减少打包后的体积

gzip压缩

参考www.jianshu.com/p/957ed8a7c…

SplitChunks提取或分离代码

与上一条同理，主要是为了解决chunk-vendors文件过大的问题，chunk-vendors是将项目引入的依赖包统一打包，使用plitChunks可以将chunk-vendors分开打包，通过这种方式，最终chunk-vendors会被分离成一个个以npm.依赖包名称.***.js的文件，可以和上述的gzip同步使用

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 `npm.${packageName.replace('@', '')}`
                }
            }
        }
    }
}