# 现状
目前性能比较差,lighthouse 得分只有63。

# SplitChunks 优化
uni-app 源码中,packages/vue-cli-plugin-uni/lib/h5/index.js
可以看到uni-app
给出的chunk
配置。
const vueConfig = {
pages: {
// 在这个页面中包含的块,默认情况下会包含
// 提取出来的通用 chunk 和 vendor chunk。
chunks: ['chunk-vendors', 'chunk-common', 'index'],
}
}
pages.chunks
取自 webpack
插件 html-webpack-plugin
里面的 chunks
属性,在打包的时候会被插入到入口文件 index.html
里面。
这里的 pages
配置会传给 html-webpack-plugin
,转化成的 webpack
配置如下:
optimization: {
splitChunks: {
cacheGroups: {
vendors: {
name: 'chunk-vendors',
test: /[\\/]node_modules[\\/]/,
priority: -10,
chunks: 'initial'
},
common: {
name: 'chunk-common',
minChunks: 2,
priority: -20,
chunks: 'initial',
reuseExistingChunk: true
}
}
}
}
几个心得:
vendors
的chunks
不能设置为all
,否则会把非入口页面的三方库一起打包了。比如其他页面都是异步加载,它们的js
应该单独打包,而不是都放在入口的vendors
中。
vendors: {
name: 'chunk-vendors',
test: /[\\/]node_modules[\\/]/,
priority: -10,
chunks: 'initial',
reuseExistingChunk: true,
},
maxInitialRequests
表示入口的最大并行请求数,它应该设置较大的数值,默认是3,当你拆出来的chunks
比较多,这个数字根本不够用,造成的结果就是设置的cacheGroups
不生效。
优化完 index.html
的 chunks
,lightHouse
的性能得分从 63
上升到 70
分。

参考:
- webpack中的optimization配置详解(splitChunks) (opens new window)
- 浅析 Webpack SplitChunks (opens new window)
- 关于Vue-cli3.0 的配置。pages.chunks的参数的意义 (opens new window)
- html-webpack-plugin用法全解 (opens new window)
- Webpack SpiltChunks 文档 (opens new window)
# FCP 优化
First Contentful Paint 标记了绘制出首个文本或首张图片的时间。
项目 FCP 耗时长,之前为 4.5
秒左右。可以通过在 index.html
中加个 loading
,并在 DOMContentLoaded
事件发生时,去掉此DOM
。
大致代码如下:
<script>
!function () {
var i = document.createElement("div");
i.innerHTML = '<style>.pre-loading{}</style><div class="pre-loading"></div>';
document.body.appendChild(i);
document.addEventListener("DOMContentLoaded", (function () {
setTimeout((function () {
document.body.removeChild(i)
}))
}))
}()
</script>
有几个注意点:
- 不要放到所有非异步脚本的后面,否则会等前面的脚本加载完才执行,太慢了
- 不要用
loading
图片,因为图片加载也需要时间,可以直接用样式控制
# LCP 优化
可优化的点比较多,这里用了“消除资源加载延迟”,也就是让 LCP 的资源与网页的第一个资源同时启动。
参考: