内容简介:最近在做一个基于mobile app的漫画的项目,面向印尼市场。网址是http://id.mangaya.mobi上线后,基本测试没有问题,打开也挺顺畅。但是google analytics却反馈加载平均
最近在做一个基于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等策略。
同时我们还招募了志愿者帮我们测试嘻嘻嘻当然这只是首次的加载的时间问题,后续还有观看漫画的优化工作,以及改成https协议加入pwa的service worker等等,敬请期待哈哈。
以上所述就是小编给大家介绍的《React 出海应用 首屏加载时间从20S降到10S以下 血泪史》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- 看一个大型云商转型的血泪史
- UE4编辑器扩展踩坑血泪史
- 记一次阿里云服务器安装Python的血泪史
- 记一次阿里云服务器安装Python的血泪史
- Mac OS 上使用 ffmpeg 的 “血泪” 总结
- 【来自一线的血泪总结】你的系统上线时是否踩过这些坑?【石杉的架构笔记】
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
深入Linux内核架构
Wolfgang Mauerer / 郭旭 / 人民邮电出版社 / 201005 / 149.00元
众所周知,Linux操作系统的源代码复杂、文档少,对程序员的要求高,要想看懂这些代码并不是一件容易事。本书结合内核版本2.6.24源代码中最关键的部分,深入讨论Linux内核的概念、结构和实现。具体包括进程管理和调度、虚拟内存、进程间通信、设备驱动程序、虚拟文件系统、网络、时间管理、数据同步等方面的内容。本书引导你阅读内核源代码,熟悉Linux所有的内在工作机理,充分展现Linux系统的魅力。 ......一起来看看 《深入Linux内核架构》 这本书的介绍吧!