最近在做一个基于mobile app的漫画的项目，面向印尼市场。
网址是http://id.mangaya.mobi
上线后，基本测试没有问题，打开也挺顺畅。但是google analytics却反馈加载平均19s！
OMG～～于是开展了一系列的探索。。
首先说说技术栈，用的是create-react-app,redux,react-router,webpack4,babel7.
我们知道网页的加载流程大致如下：
那么优化网页的加载速度，最本质的方式就是，1.减少请求数量 2.缩小请求体积大小。
减少请求数量
- 用base64减少不必要的网络请求，实际上create-react-app已经自动帮我们做了。
- 引入文件使用React.Lazy
- 图片延迟加载,使用react-lazyload，非常方便。
缩小请求体积大小
-
后台返回的图片使用webp格式，缩小体积。但是由于webp目前只被安卓支持，所以我们目前的方案是后端获取请求的user-agent信息，判断如果是ios的话，就返回jpg格式的图片，如果是安卓的话，就返回webp格式。这主要使用在banner图。
-
webpack 处理
-
2.1 build的时候去掉map文件，减少不必要的文件以及防止被查看源码
-
2.2 压缩css和js，实际上create-react-app已经自动帮我们做了。uglifyjs-webpack-plugin使用的uglify-es已经不再被维护，取而代之的是一个名为terser的分支。
-
2.3 默认splitChunk是
chunks: 'all'，但是这样会导致生成一个很大的vendor文件，可以改一下，将node文件抽离出来。
splitChunks: {
// chunks: 'all',
chunks: "all",
maxInitialRequests: Infinity,
minSize: 0,
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
name(module) {
// get the name. E.g. node_modules/packageName/not/this/part.js
// or node_modules/packageName
const packageName = module.context.match(
/[\\/]node_modules[\\/](.*?)([\\/]|$)/
)[1];
// npm package names are URL-safe, but some servers don't like @ symbols
return `npm.${packageName.replace("@", "")}`;
}
}
},
name: false
},
复制代码这样虽然总的项目大小变大了，但是由于vendor文件被拆分成多个文件，根据http1.1或者http2的协议，浏览器资源获取是可以多个并行的，配合cdn，这样请求资源，反而更快。
- 2.4 Babel polyfill的按需加载,直接在package.json配置就好了，由于需要支持的机子比较低端，所以设定为支持
>0.02%的机型。可参考
"browserslist": [
">0.02%",
"not dead",
"not ie <= 11",
"not op_mini all"
]
复制代码- gzip压缩 如果浏览器支持gzip压缩，在发送请求的时候，请求头中会带有
Accept-Encoding:gzip。然后服务器会将原始的response进行gzip压缩，并将gzip压缩后的response传输到浏览器，紧接着浏览器进行gzip解压缩，并最终反馈到网页上。
资源cdn加速
将静态服务器改成印尼的服务器，明显dns以及静态资源的传输加快。最后就是cdn加速静态资源了，我把npm包的js都放到cdn上了，之后还可以配置多路cdn等策略。
总结
经过一段时间的努力，成功将首次加载时间从19秒变成10秒以下！仍需要继续。。。