背景

APP里面很多简单的H5是通过后台进行配置的，不需要进行人力开发。但是会出现运营人员不懂优化逻辑，导致APP内的H5白屏时间非常长。

基于以上背景，开发想到了利用本地文件的优势，来优化H5打开渲染时间。

目标

将运营配置的H5转成本地H5，同时将H5所引用的资源全都本地化，下载到本地。

这样子用户在APP内打开H5就相当于打开了本地文件，从而减少了白屏时间，达到秒开的效果。

调研

ast常用工具

1、线上查看AST效果

astexplorer

2、常用的ast转化工具包

js的转化

官网babel

简介： Babel 是一个 JavaScript compiler

Babel 是一个工具链，主要用于在当前和旧的浏览器或环境中，将 ECMAScript 2015+ 代码转换为 JavaScript 向后兼容版本的代码。以下是 Babel 可以做的主要事情：

转换语法
Polyfill 目标环境中缺少的功能（通过如 core-js 的第三方 polyfill）
源代码转换(codemods)

ast的type类型记录
FunctionDeclaration:函数声明表达式比如 function a(){}
VariableDeclaration:声明表达式比如 const a = 1 | const a = function(){} 
ExpressionStatement:赋值表达式比如 a = 1 | a = function(){}
ObjectExpression:对象类型比如 {a:1}
ObjectProperty:对象属性类型 比如{a:1}里面的 a:1
ArrayExpression:数组类型 比如 {a:[]}里面的 []
NumericLiteral:数字类型 比如 {a:1}里面的 1
StringLiteral:字符串类型 比如 {a:'1'}里面的 '1'

html的转化

官网cheerio

简介：为服务器特别定制的，快速、灵活、实施的jQuery核心实现。通过它，可以解析html，修改html。

文件下载

node-fetch

介绍：与浏览器一致的fetch api。

使用node-fetch下载案例

遇到的问题

线上H5本地化用file协议打开HTML后内容为空

juejin.cn/post/712316…

这里的原因是线上H5使用了vue-router。vue-router中的history模式不支持File协议，只支持http协议。解决方法：

路由history模式改成hash模式
不使用vue-router插件

基础建设/业务/H5转本地H5

背景

目标

调研