# 拆分维度
- Code Splitting
- dynamic import
- react-lazy(react-loadable)
- webpack 4.0
- Named chunk
- dynamic import
- Runtime Splitting
- Iframe
- sandbox
- Deployment Splitting
# 沙盒应该做什么
古老的 iframe —— 古老的困难
- 一些能做的
- 一个站点页面拆成 N 个 frame
- 每个 frame 单独一个独立域名
- 独立上下线
- 独立运行时
- 困难
- 难以 deeplinking
- 数据共用困难
- 登录身份
- 站内信
- 跨模块通信
- 困难重重的共用代码、加载优化、运行优化
# 沙盒像什么
- Docker
- 开发者必须体会不到环境的区别
- 运行时没有环境差异
- 服务端微服务的基石
- Docker 时代之前的(服务端)微服务
- 虚拟机使用复杂,维护成本巨大
- 资源消耗
- 镜像启动
- 进程通信
- 直到 Docker 普及
- 前端的“微服务”在浏览器环境下并没有
- 虚拟机使用复杂,维护成本巨大
- 微前端的实践
- 前端沙盒像浏览器里面的 Docker
- Iframe 像虚拟机
# 沙盒怎么做
- 参考单核、操作系统进程模拟进程切换策略
- JavaScript 是单线程的
- 通过对路由切换的封装,模拟单进程
- 通过对事件循环封装,模拟单核多进程
- 用 Context 切换模拟线程安全
- 新沙盒即将激活时,查找当前激活中的沙盒
- 保存现场,存储 Context
- 恢复之前的 Context
- Context 切换的笛卡尔积
- 比较并切换
- 沙盒数量 N 的笛卡尔平方
- 退回“初始” Context
- 恢复之前 diff 的 Context
# 字节的沙盒做了什么
# CSS 的干扰
- 独立开发、混合加载
- HTML 标准的 CSS 作用域
- Scoped CSS
- Shadow DOM
- CSS module、CSS in JavaScript
- DOM header
- 单核多进程的情况
- 多个沙盒时,只能 CSS in JavaScript
- CSSStyleSheet.cssRules
# 全局变量的干扰
- Polyfill 等差异巨大
- 如 generatorRuntime
- 组件模块化
- 全局的外部环境
- Identifier
- let
- const
- class
- Configurable
- window.location
# 需要进程安全的对象
- DOM 沙盒等
- Cookie
- LocalStorage
# 沙盒模式中埋点、系统采样的设计
# 埋点数据的缓存创建
- 全局数据(uid 等)默认缓存本地
- 缓存跟随沙盒切换
- 两级缓存
- 沙箱内全局
- 系统全局
# 埋点数据的发送
- 异步发送
- 触发时机在沙盒外、缓存跟随沙盒切换
- 全局缓存和本地缓存统一本地存储
# console 回收
- 干净体面
- 控制 sourceMapping
- 向 log 中注入 callstack
- 额外加入快照
# sourceMapping
- 原理:文本的映射
new Function
- 管理发布