博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
React 出海应用 首屏加载时间从20S降到10S以下 血泪史
阅读量:5873 次
发布时间:2019-06-19

本文共 2023 字,大约阅读时间需要 6 分钟。

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

网址是http://id.mangaya.mobi

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

OMG~~于是开展了一系列的探索。。

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

我们知道网页的加载流程大致如下:

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

减少请求数量

  1. 用base64减少不必要的网络请求,实际上create-react-app已经自动帮我们做了。

  1. 引入文件使用React.Lazy

  1. 图片延迟加载,使用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"  ]复制代码
  1. gzip压缩 如果浏览器支持gzip压缩,在发送请求的时候,请求头中会带有Accept-Encoding:gzip。然后服务器会将原始的response进行gzip压缩,并将gzip压缩后的response传输到浏览器,紧接着浏览器进行gzip解压缩,并最终反馈到网页上。

资源cdn加速

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

总结

经过一段时间的努力,成功将首次加载时间从19秒变成10秒以下!仍需要继续。。。

同时我们还招募了志愿者帮我们测试嘻嘻嘻
当然这只是首次的加载的时间问题,后续还有观看漫画的优化工作,以及改成https协议加入pwa的service worker等等,敬请期待哈哈。

转载地址:http://zthnx.baihongyu.com/

你可能感兴趣的文章
知行合一
查看>>
jmeter插件之jsonpath提取响应结果和做断言
查看>>
apt-get 命令加 autoclean clean autoremove 区别
查看>>
Docs-->.NET-->API reference-->System.Web.UI.WebControls-->Repeater
查看>>
发布支持多线程的PowerShell模块 —— MultiThreadTaskRunner
查看>>
从零开始理解JAVA事件处理机制(1)
查看>>
(转)eclipse安装jetty
查看>>
【php学习笔记】ticks篇
查看>>
最大割(Maximum cut)
查看>>
CSS中margin边界叠加问题及解决方案
查看>>
Ralink5350开发环境搭建
查看>>
Ubuntu ctrl+alt会导致窗口还原的问题
查看>>
poj 2406 Power Strings(KMP)
查看>>
第二百九十六节,python操作redis缓存-Hash哈希类型,可以理解为字典类型
查看>>
Ubuntu 16.04下截图工具Shutter
查看>>
第四十期百度技术沙龙笔记整理
查看>>
推荐系统那点事 —— 基于Spark MLlib的特征选择
查看>>
linux 下RTL8723/RTL8188调试记录(命令行)【转】
查看>>
開始新的征程
查看>>
SpringMVC案例1——对User表进行CRUD操作
查看>>