vue首页白屏，性能优化
背景
vue，react诸如此类的spa应用，都会避免不了首页白屏的问题，之前一直做B端项目，对这方面也并没有特别大的业务需求，最近由于公司做C端产品，对首页打开速度有一定的要求，做了一系列的优化处理
优化方案
1. 配置gizp，启用代码压缩
所有现代浏览器都支持 gzip 压缩，启用 gzip 压缩可大幅缩减传输资源大小，从而缩短资源下载时间，减少首次白屏时间，提升用户体验。 gzip 对基于文本格式文件的压缩效果最好（如：CSS、JavaScript 和 HTML），在压缩较大文件时往往可实现高达 70-90% 的压缩率，对已经压缩过的资源（如：图片）进行 gzip 压缩处理，效果很不好
const CompressionWebpackPlugin = require('compression-webpack-plugin')
const configObj = process.env.NODE_ENV !== 'development' && process.env.NODE_ENV !== 'dev' ? [
new UglifyJsPlugin({
uglifyOptions: {
compress: {
drop_debugger: true,
drop_console: true
}
},
sourceMap: false,
parallel: true
}),
// 配置compression-webpack-plugin压缩
new CompressionWebpackPlugin({
algorithm: 'gzip',
test: new RegExp('\.(' + productionGzipExtensions.join('|') + ')$'),
threshold: 2048,
minRatio: 0.8
}),
] : []
2.关闭productionSourceMap
productionSourceMap是用来报错时定位到代码位置。 如果不想让别人看到源码可以设置为false，并且可以减少打包后包的体积，加密源码。
productionSourceMap: false,
3.资源拆分引用CDN
项目越来越大，即使是按需引入，也会导致项目打包体积越来越大，首页压力增加，将不常变更的资源拆分出来，挂在CDN,
- 抽离出来的资源，在public/index.html挂载
<script src="https://cdn.bootcss.com/vue/2.6.14/vue.runtime.min.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.6/vue-router.min.js"></script>
<script src="https://cdn.bootcss.com/vuex/3.1.0/vuex.min.js"></script>
<script src="https://cdn.bootcss.com/axios/0.18.1/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vant@2.12/lib/vant.min.js"></script>
- 在 vue.config.js 配置 externals 属性，打包时不打进去
config.externals({
'element-ui': 'ELEMENT',
'vue': 'Vue',
'vuex': 'Vuex',
'vue-router': 'VueRouter',
'axios': 'axios',
'vant':'vant',
'video.js':"video.js",
'less':'less'
})
4. 路由懒加载
5.预加载 prerender-spa-plugin
prerender-spa-plugin预渲染：构建阶段生成匹配预渲染路径的 html 文件（注意：每个需要预渲染的路由都有一个对应的html）。构建出来的 html 文件已有部分内容。
在需要请求动态数据的页面中，预渲染只能保证静态部分不更改，如果不想写死，要做动态数据代理，webpack的devserver代理数据无效，需要用nginx或者其他代理工具代理线上数据
- vue.config.js 配置 prerender-spa-plugin
const PrerenderSPAPlugin = require('prerender-spa-plugin')
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer
new PrerenderSPAPlugin({
staticDir: path.resolve(__dirname, 'dist'),
routes: ['/'],
minify: {
collapseBooleanAttributes: true,
collapseWhitespace: true,
decodeEntities: true,
keepClosingSlash: true,
sortAttributes: true
},
renderer: new Renderer({
headless: true,
renderAfterDocumentEvent: 'custom-render-trigger'
})
}),
- Main.js 中document.dispatchEvent(new Event('custom-render-trigger'))
new Vue({
router,
store,
i18n,
render: h => h(App),
mounted() {
document.dispatchEvent(new Event('custom-render-trigger'))
}
}).$mount('#app')
6.ssr服务端渲染
SSR全拼是Server-Side Rendering，服务端渲染。 所谓服务端渲染，指的是把vue组件在服务器端渲染为组装好的HTML字符串，然后将它们直接发送到浏览器，最后需要将这些静态标记混合在客户端上完全可交互的应用程序。
①满足seo需求，传统的spa数据都是异步加载的，爬虫引擎无法加载，需要利用ssr将数据直出渲染在页面源代码中。 ②更宽的内容达到时间（首屏加载更快），当请求页面的时候，服务端渲染完数据之后，把渲染好的页面直接发送给浏览器，并进行渲染。浏览器只需要解析html不需要去解析js。
