1.背景介绍
接手了一个7,8手的项目,没有模块化,项目结构没有分层,所有的东西都是cv,变量命名几乎无法阅读,真真的是司马迁厕所读史记---史上加屎。没办法,作为一个专业人员,我只能在这上面添砖加瓦了。最近领导不是嫌弃首屏加载太慢,于是活这不又来了吗(ps.原来优化过一次,但是嘛,摸鱼人干活永远只干一半)。
2.论我的两次优化
1.个别用户手机白屏,主包大小优化问题
这个问题是运营反馈的,你永远也不知道你的用户到底还在用着安卓几(ps.这是个h5套壳的安卓项目,都用taro了直接转rn不好嘛,黑人问号?)。有bug嘛,那肯定是要改的嘛(谁叫他发钱呢)。问题是这样的,用户其实已经进入app了,并且内容已经显示出来了,但是个别页面点击跳转后,app白屏,必须得杀进程后再重新进入,但再次点击还是会白屏(无限循环,就这几个用户,改个屁啊,影响我刷论坛,干)。
接下来就是定位了,其实这种混合项目或多或少都会因为兼容问题出bug,开始是叫安卓改的,希望把webview改成腾讯内核的,但是安卓说不改,改不了(嫡系就是牛逼!!!)。接下来就只能我这个最底层的来改了。跳转有问题,要么跳转链接错了,要么参数没拿到,因为是部分用户有这问题(妈的,换手机啊),所以我直接从第二个可能性入手了。借遍所有测试机,全无问题(晃点我是吧?),既然用户有问题,那肯定是有问题了,不改点东西,今天都不好意思拿老板钱,开启大对比发,对比没问题的跳转链接和有问题的跳转链接,终于发现了罪魁祸首————URLSearchParams,在路由跳转时这几个页面为了省事直接用这个函数,将这个修改成最原始的写法xxx=xxx就没问题了,推荐一个兼容性网站https://caniuse.com。发散下思维,这个函数都不支持,会不会es6也不支持,为了解决隐患,就去dist目录下搜索了const,还不少,最后发现都是modules里的(不应该啊),改吧。直接贴代码
webpackChain (chain) {
chain.merge({
module: {
rule: {
es5Loader: {
include: [
path.resolve(__dirname, "../node_modules"),
],
test: /\.*[tj]s$/,
use: [
{
loader: "babel-loader",
}
]
}
}
}
});
编译ok,测试ok,发版。运营反馈已经没问题了(完美,这周工作量完成,出去抽烟)。小x啊,为什么首次加载这么久?(打包后app.js 2m+,app.css都1m+能不久嘛,但是我不说~~)。接下来就是一些常规的操作,先用webpack-bundle-analyzer分析打包后的结构,发现一个是moment组件打包后还是会带local进去,其实项目不需要使用,所以先去掉moment的local:
chain.plugin('nolocal').use(new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/));
第二个就是开启taro自带的terser,这样app.js就能下到差不多300kb。然后就是将图片压缩,压缩后主包下到了1.3m左右,最后在打包的时候把引入的vsconsole去掉,app.js下到1.1(完美,工作完成)。
2.第二次优化
为什又要再优化,因为被投诉了。这次只能从别的地方入手,还是先用webpack-bundle-analyzer分析,发现已经没发再从代码入手了(其实可以的,抽取公共模块commonChunkpulgin,修改项目结构,抽公共组件,减少耦合,但是这些得留到下次投诉了)。最后咋整的,把首屏加载的公共部分抽离,二开启gzip(直接起飞啊兄弟吗),直接上代码
webpackChain (chain) {
chain.merge({
plugin: {
install: {
plugin: require('compression-webpack-plugin'),
args: [{
test: /\.(js|css)/,
filename: '[path].gz[query]',
algorithm: 'gzip',
threshold: 10240,
minRatio: 0.8
}]
}
},
.....
})
}
有一点需要注意的是,taro3.x的直接用5.0.1的插件吧,最新的会报错。
上对比图
开心,这周工作量完成(摸鱼人永不为奴)。