流月
  • CSS
  • JavaScript
  • Web API
  • TypeScript
  • 框架

    • React
    • Vue
  • 其他

    • 小程序
    • 工程化
    • 性能优化
    • 测试
    • 其他
  • nodejs
  • deno
  • express
  • nginx
  • docker
  • 其他
  • 安全基础
  • 正则表达式
  • 网络基础
  • 设计模式
  • 数据结构与算法
  • LeetCode
  • CodeWars
  • 手写代码
  • Git
  • devops
  • 编码原则
  • 防御编程
  • Chrome
  • Edge
  • Flutter
  • Linux
  • 库
  • 网站
  • 面试
  • 摘抄
  • 方法论
  • 语法
  • 王小波
  • Elon Musk
  • CSS
  • JavaScript
  • Web API
  • TypeScript
  • 框架

    • React
    • Vue
  • 其他

    • 小程序
    • 工程化
    • 性能优化
    • 测试
    • 其他
  • nodejs
  • deno
  • express
  • nginx
  • docker
  • 其他
  • 安全基础
  • 正则表达式
  • 网络基础
  • 设计模式
  • 数据结构与算法
  • LeetCode
  • CodeWars
  • 手写代码
  • Git
  • devops
  • 编码原则
  • 防御编程
  • Chrome
  • Edge
  • Flutter
  • Linux
  • 库
  • 网站
  • 面试
  • 摘抄
  • 方法论
  • 语法
  • 王小波
  • Elon Musk
  • 小程序

小程序组件化开发框架:webpy

小程序项目脚手架工具:miniapps

UI库:weuihttps://weui.io/

小程序代码体积优化

小程序本身有个 2M 限制

缩减代码体积的方式

  • 压缩混淆
  • 代码分割
  • 公共代码复用
  • tree shaking
  • 使用分包

taro

  • 主包大小:目前各小程序都有对主包的大小进行限制,如京东小程序限制为 5M、微信小程序限制为 2M
    • 框架压缩前后的大小仅为84k
  • 类型安全和运行时检测
    • 可以使用 TypeScript 或 Flow
    • 或使用 PropsType 在运行时进一步保障代码的鲁棒性
  • 全面支持JSX语法和HOOKS
  • 完美支持 Typescript,自带代码智能提示和代码实时检查功能
  • 支持npm和插件系统
  • 全新生命周期和 Context API
    • Taro 1.3 还实现了 React 16 的 createContext、contextType 和 useContext API
  • 移动端容器更换
    • 原有的移动端容器 expo 替换为深度定制的 JDReact

How

  • 先把 React 代码分析成一颗抽象语法树 AST
  • 根据这颗树生成小程序支持的模板代码
  • 再做一个小程序运行时框架
    • 处理事件和生命周期与小程序框架兼容
  • 把业务代码跑在运行时框架就完成了小程序端的适配
Last Updated: 7/5/20, 5:05 AM
Contributors: bhaltair, wangqi