React 出海应用 首屏加载时间从20S降到10S如下 血泪史

最近在作一个基于mobile app的漫画的项目，面向印尼市场。

网址是www.mangaya.mobi

上线后，基本测试没有问题，打开也挺顺畅。可是google analytics却反馈加载平均19s！

OMG～～因而开展了一系列的探索。。

首先说说技术栈，用的是create-react-app,redux,react-router,webpack4,babel7.

咱们知道网页的加载流程大体以下：

那么优化网页的加载速度，最本质的方式就是，1.减小请求数量 2.缩小请求体积大小。

减小请求数量

1. 用base64减小没必要要的网络请求，实际上create-react-app已经自动帮咱们作了。

2. 引入文件使用React.Lazy

3. 图片延迟加载,使用react-lazyload，很是方便。

   

   

缩小请求体积大小

1. 后台返回的图片使用webp格式，缩小体积。可是因为webp目前只被安卓支持，因此咱们目前的方案是后端获取请求的user-agent信息，判断若是是ios的话，就返回jpg格式的图片，若是是安卓的话，就返回webp格式。这主要使用在banner图。

2. 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"
  ]
复制代码

3. gzip压缩 若是浏览器支持gzip压缩，在发送请求的时候，请求头中会带有Accept-Encoding:gzip。而后服务器会将原始的response进行gzip压缩，并将gzip压缩后的response传输到浏览器，紧接着浏览器进行gzip解压缩，并最终反馈到网页上。

资源cdn加速

将静态服务器改为印尼的服务器，明显dns以及静态资源的传输加快。最后就是cdn加速静态资源了，我把npm包的js都放到cdn上了，以后还能够配置多路cdn等策略。

4.静态资源缓存 加入pwa的service worker

5.字体 因为字体通常比较大，使用 font-display: swap；能够先让用户看到本地字体显示出内容来先，等字体加载下来了，再进行替换。

@font-face {
  font-family: 'Arvo';
  font-display: swap;
  src: local('Arvo'), url(https://fonts.gstatic.com/s/arvo/v9/rC7kKhY-eUDY-ucISTIf5PesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
}
复制代码

详细可查看font-display。

总结

通过一段时间的努力，成功将首次加载时间从19秒变成10秒如下！仍须要继续。。。

同时咱们还招募了志愿者帮咱们测试嘻嘻嘻

固然这只是首次的加载的时间问题，后续还有观看漫画的优化工做，以及支持http2.0，而后将vendor文件拆分红多个js文件加速加载等。