rn打包原来是packager,后来独立出一个专门的打包工具metro,构建工具的大体思路跟前端构建工具差不多,都会有一个启动文件,然后根据模块依赖关系把对应文件找到。

开发中打包

在开发中打包,我们访问的是一个index.bundle,这个时候跟其他的前端构建工具一致,都是会启动一个node 服务,metro提供了一个createServer方法,这个方法结合http(s)模块构建出一个可以提供bundle文件的服务器,当然可以其他的node框架,比如express:

const express = require('express');
const app = express(); app.use(
metroBundlerServer.processRequest.bind(metroBundlerServer),
); app.listen(8081);

我们可以在浏览器中输入http://localhost:8081/index.bundle?platform=ios&dev=true

那么这个bundle文件就会被返回,而metroServer会提供几个方法来提供返回内容,可以是bundle也可以是其他静态资源,这里我们访问的是bundle,那么就会使用processRequestBundle方法,这个方法会根据访问的url去找对应的js文件,然后打包成bundle文件



所以这里的虚拟目录根目录就是项目根目录,我们可以独立的去访问某个目录下js文件,都会为我们打包成bundle文件返回。

bundle文件

这里简单分析下bundle文件,我们简单的翻一下整个文件,就可以发现,前面除了第一行是设置环境变量,其他都是一些自执行函数,后面的全是_d函数,大致也可以猜出来,_d函数就是模块定义函数。我们看前面的函数,第一个自执行函数里面有个很熟悉的东东,_d函数找到了,它被挂在到global下,在这个函数中把模块加载相关做了定义。



模块的id是一个createModuleIdFactory方法,然后我们看到第一个定义的模块id是从11开始的,这是因为之前的polyfill文件生成也在调用这个函数。

function createModuleIdFactory() {
const fileToIdMap = new Map();
let nextId = 0;
return path => {
let id = fileToIdMap.get(path);
if (typeof id !== 'number') {
id = nextId++;
fileToIdMap.set(path, id);
}
return id;
};
}

而后面的几个函数我们可以看到都是各种es6语法的polyfill,其中有个函数很特别,先是定义了一个inspect函数,里边大量的数据类型判断,之后重新定义了console方法,这里其实是对console做了polyfill,但是由于rn的打印错误信息跟浏览器有不一致,所以前面会有很多数据类型判断,来保持跟浏览器控制台中打印的一致。



之后的紧接着就是我们的项目启动模块,但是之后的就是rn、react以及其他依赖项目的模块,一致到所有的公共模块加载完才是我们的业务模块。

本地打包

本地打包也就是打包出实实在在的bundle文件,而不是虚拟目录下,命令使用这里就不说了,这里要注意的一点就是,如果你想在某个目录下存放你的bundle文件,这个目录一定要存在,metro不会帮你去创建目录。这个时候调用依然会是metro的server,只不过最终会输出bundle文件到指定目录。

打包后的bundle文件跟开发中的结构是一致的,但是我们仔细看就会发现模块id变少了,前面的polyfill文件一样的,都是第一个模块ID都是11,也就是启动文件,那么就是中间的模块便少了,其实就是一些公共模块做了合并,所以看起来少了。

总结

基本来说只要rn和react等基础包版本不变,那么打包出来的bundle文件公共部分就是相同的,这里也利于我们进行基础包也业务包的分离。

rn打包分析的更多相关文章

  1. H264码流打包分析(精华)

    H264码流打包分析 SODB 数据比特串-->最原始的编码数据 RBSP 原始字节序列载荷-->在SODB的后面填加了结尾比特(RBSP trailing bits 一个bit“1”)若 ...

  2. create-react-app 搭建的项目中,引入 webpack-bundle-analyzer 打包分析

    安装npm intall webpack-bundle-analyzer --save-dev 在 config/webpack.config.prod.js 文件(推荐)或 config/webpa ...

  3. vue-cli、create-react-app 项目如何查看打包分析?

    vue-cli.create-react-app 项目如何查看打包分析? 项目 如何查看打包分析 vue-cli 创建的项目 已经集成 webpack-bundle-analyzer,运行npm ru ...

  4. webpack之打包分析以及prefetching和preloading

    打包分析: https://webpack.js.org/guides/code-splitting/#bundle-analysis        性能优化使用缓存是很有限的,现在更多的应该是再编写 ...

  5. RTP协议解析及H264/H265 音视频RTP打包分析

    一 概述 实时传输协议(Real-time Transport Protocol或简写RTP)是一个网络传输协议,它是由IETF的多媒体传输工作小组1996年在RFC 1889中公布的. RTP协议详 ...

  6. H264码流打包分析

    转自:http://www.360doc.com/content/13/0124/08/9008018_262076786.shtml   SODB 数据比特串-->最原始的编码数据 RBSP ...

  7. Unity编译Android的原理解析和apk打包分析

    作者介绍:张坤 最近由于想在Scene的脚本组件中,调用Android的Activity的相关接口,就需要弄明白Scene和Activity的实际对应关系,并对Unity调用Android的部分原理进 ...

  8. maven项目打包分析及打包后war包缺少配置文件报错的原因分析,使用progard混淆时配置分析

    1.maven打包: 一直以来我都没太注意过在myeclipse下使用run as来clean居然对项目的target目录没有进行操作,要让操作有效,需要进入到maven build...选项下,进行 ...

  9. RN打包的那些坑儿

    Write By lz: Lz 寄语: RN虐我千百遍, 我待RN如初恋, 坑儿爬多了也就自然了 官方文档: http://reactnative.cn/docs/0.43/signed-apk-an ...

随机推荐

  1. UVA12034 Race

    嘟嘟嘟 令dp[i]表示在n个人中,有 i 个人获得第一名的方案数,转移方程为dp[i] = C(i, n) * dp[n - i].C(i, n)就是从n个人中选 i 个第一,那么剩下的n - i ...

  2. tp3.2中前台模板中日期时间的转换

    {$vo.create_time|date='Y-m-d',###} 其中###是占位符

  3. 关于mysql 出现 1264 Out of range value for column 错误的解决办法

    今天给客服恢复mysql数据的时候.本来测试好的数据.但是到了客户那里却死活不干活了.老报错! INSERT INTO ka_tan4 set num='716641385999', username ...

  4. js 实现商品放大镜效果

    知识点,需熟悉下面属性及含义: offsetLeft           //获取元素相对左侧的距离 (计算是从最左侧边框外开始) offsetTop           //获取元素相对顶部的距离 ...

  5. fastTime格式化时间

    { field: 'alarmTime', title: '告警时间', align: 'center', width: 90, valign: 'middle', formatter:functio ...

  6. iview中table里嵌套i-switch、input、select等

    iview中table内嵌套 input render:(h,params) => { return h('Input',{ props: { value:'', size:'small', } ...

  7. 一文读懂类加载机制--ClassLoader

    一.什么是ClassLoader? 大家都知道,当我们写好一个Java程序之后,不是管是CS还是BS应用,都是由若干个.class文件组织而成的一个完整的Java应用程序,当程序在运行时,即会调用该程 ...

  8. 一点一点看JDK源码(五)java.util.ArrayList 后篇之removeIf与Predicate

    一点一点看JDK源码(五)java.util.ArrayList 后篇之removeIf与Predicate liuyuhang原创,未经允许禁止转载 本文举例使用的是JDK8的API 目录:一点一点 ...

  9. JAVA中时间格式转换

    1.将任意日期格式的字符串转换为指定格式的字符串 //默认格式 String s1 = "20190110133236"; //给定格式 String s2 = "201 ...

  10. python 变量定义

    变量定义 什么是变量? 在程序运行过程中,其值可以改变的量. 标识符(命令规范) 只能由数字.字母.下划线组成 不能以数字开头 不能是系统关键字 import keyword ​ # 打印关键字列表 ...