H5 hybrid开发-前端资源本地化方案纪要
H5 hybrid-前端资源本地化方案纪要
- 就整个行业来说,大前端是趋势,现阶段,native方面除了一些偏CPU密集型工作与操作系统底层API方面的工作外,H5基本都可以满足需要。
- 目前的工作更偏向前端架构多一点,除了要对FE负责,还要对整体项目以及其他部门(配合)负责。本地资源本地化方案本身就源于此。
- 在此简要总结下个人对 Hybrid开发中 以H5为主的SPA的资源本地化方案,本方案针对于基于IOS/Android双端Webview的Hybrid开发。
- 截止发文时间,依托于此方案的项目已稳定上线。
- 项目基于敏捷开发管理方案,并处于持续迭代中。
- 细节方面,三言两语很难阐述清楚,在此主要简单记录一些方向性和思路性的问题。
方案目标/优势
- 严格保证弱网或断网情况下App的可用性。
- 在保证性能与体验的基础上,尽可能降低native成本。
- 提升H5流畅性体验
- 方便快速迭代
方案可行性调研
- 前端资源所占的高比重是否会对Native发版造成影响?
- HTTP(S)协议 转变为 file协议后,对前端资源加载(原生加载)的影响?
- HTTP(S)协议 转变为 file协议后,对 bridge 功能的影响(native通信、native资源加载、HTTP(S) proxy请求)等?
- HTTP(S)协议 转变为 file协议后,React Router的 hash模式 或 history模式功能的可用性?
- Webpack工程化对FE工作流下各场景(devServer、native devServer、build、syncDev、syncBuild、publish等)的支持程度?
注意事项 & 功能点
- 前端资源版本迭代机制?
- 前端资源的更新机制?
- 前端资源与Native资源的对应机制?
- 前端资源的加密与解密机制?
- 前端资源的线下同步、上线、回滚机制?
- bridge API 的便利性?
持续优化
- 前端脚手架的持续优化
- splitChunkPlugin 的持续优化、资源本地化与前端资源差量更新的探索
- react-router-dom的最佳实践(路由与组件的匹配标准化、对单个路由定制的规范化与便利性的提升等)
- 持续的 Native 体验优化
- react hooks 的性能优化与规范化
H5 hybrid开发-前端资源本地化方案纪要的更多相关文章
- H5静态资源本地化实践
现在很多app都是通过webview内嵌H5的页面,这种方式的好处就是无需发版就能更新线上的内容,而且可以做到多平台的统一开发,节约开发成本.但是这种模式也带来了一定的问题,web开发很大程度依赖于网 ...
- 关于web开发前端h5框架的选择
关于web开发前端h5框架的选择 看了很多移动版框架都是基于app混合式开发的,不是单独h5网站的基于h5开发的web框架从组件丰富度,兼容性,相关教程来说bootstrap还是最好的react和vu ...
- Web前端,HTML5开发,前端资源,前端网址,前端博客,前端框架整理 - 转改
Web前端/H5开发,前端资源,前端网址,前端博客,前端框架整理 综合类 前端知识体系 前端知识结构 Web前端开发大系概览 Web前端开发大系概览-中文版 Web Front-end Stack v ...
- 【前端知识体系-JS相关】对移动端和Hybrid开发的理解?
1.hybrid是什么,为何使用hybrid呢? 概念: hybrid就是前端和客户端的混合开发 需要前端开发人员和客户端开发人员配合完成 某些环节也可能会涉及到server端 大前端:网页.APP. ...
- GitHub最全的前端资源汇总仓库(包括前端学习、开发资源、求职面试等)
在GitHub上收集的最全的前端资源汇总(包括前端学习.前端开发资源.前端求职面试等) 个人结合github上各位大神分享的资源进行了简单的汇总整理,每一个条目下面都有丰富的资料,是前端学习.工作的好 ...
- 基于Laravel开发博客应用系列 —— 使用Bower+Gulp集成前端资源
本节我们将讨论如何将前端资源集成到项目中,包括前端资源的发布和引入.本项目将使用 Bower 和 Gulp 下载和集成jQuery.Bootstrap.Font Awesome 以及 DataTabl ...
- Android Webview H5资源本地化
Android Webview H5资源本地化 一. 创建读取资源项目独立模块 1. 项目依赖的好处 符合模块化的思想,他们相互独立.一个项目持有另一个项目的引用,修改更加方便. (注:compile ...
- 【JavaScript&jQuery】前端资源大全
综合类 综合类 地址 前端知识体系 http://www.cnblogs.com/sb19871023/p/3894452.html 前端知识结构 https://github.com/Jackson ...
- 有关 Hybrid 开发模式实践总结
前言 随着公司业务不断发展,移动开发项目越来越多,项目任务时间紧,我们内部开发流程是以项目为导向,有别于一般公司对产品不断迭代的做法,但移动端开发人员资源有限,需要在不同项目之间做业务场景切换开发,就 ...
随机推荐
- HarmonyOS三方件开发指南(13)-SwipeLayout侧滑删除
鸿蒙入门指南,小白速来!0基础学习路线分享,高效学习方法,重点答疑解惑--->[课程入口] 目录:1. SwipeLayout组件功能介绍2. SwipeLayout使用方法3. SwipeLa ...
- Qt update刷新之源码分析(二)
大家好,我是IT文艺男,来自一线大厂的一线程序员 上次视频给大家从源码层面剖析了Qt update刷新机制的异步事件投递过程,这次视频主要从源码层面剖析Qt刷新事件(QEvent::UpdateReq ...
- Deep Unfolding Network for Image Super-Resolution 论文解读
Introduction 超分是一个在 low level CV 领域中经典的病态问题,比如增强图像视觉质量.改善其他 high level 视觉任务的表现.Zhang Kai 老师这篇文章在我看到的 ...
- `vi`——终端中的编辑器
`vi`--终端中的编辑器 目标* `vi` 简介* 打开和新建文件* 三种工作模式* 常用命令* 分屏命令* 常用命令速查图 01. `vi` 简介 1.1 学习 `vi` 的目的 * 在工作中,要 ...
- WIFI6 基本知识(二)
WI-FI6核心技术 WI-FI6除了继承了WI-FI5的所有MIMO特性之外,还增加了许多针对高密部署场景的特性.以下是WI-FI6的核心新特性: OFDMA频分复用技术 DL/UL MU-MIMO ...
- LNMP配置——Nginx配置 —— 用户认证
一.配置 再来创建一个新的虚拟主机 #cd /usr/local/nginx/conf/vhost #vi test.com.conf 写入: server { listen 80; server_n ...
- 源码解析之 Mybatis 对 Integer 参数做了什么手脚?
title: 源码解析之 Mybatis 对 Integer 参数做了什么手脚? date: 2021-03-11 updated: 2021-03-11 categories: Mybatis 源码 ...
- Django之Auth认证模块
一.Auth模块是什么 Auth模块是Django自带的用户认证模块: 我们在开发网站的时候,无可避免的需要设计实现网站的用户系统,此时我们需要实现包括用户注册,用户登陆,用户认证,注销修改密码等功能 ...
- 微信小程序应用开发-手动创建
基础知识: index.wxml的代码为 Html,有很多标签,如等 index.wwss相当于css 即样式 index.js中有很多函数,可自定义 操作步骤: 删除app.json文件中page/ ...
- MUV LUV UNLIMITED Gym - 102361K
题目链接:https://vjudge.net/problem/Gym-102361K 题意:两个人轮流取树叶,最后没有树叶取的人输. 思路:求出所有树叶所在链的长度即可,如果都为偶数先手必败,否则先 ...