rn打包分析

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文件

image.png

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

bundle文件

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


image.png

模块的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的打印错误信息跟浏览器有不一致,所以前面会有很多数据类型判断,来保持跟浏览器控制台中打印的一致。


image.png

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


image.png

本地打包

本地打包也就是打包出实实在在的bundle文件,而不是虚拟目录下,命令使用这里就不说了,这里要注意的一点就是,如果你想在某个目录下存放你的bundle文件,这个目录一定要存在,metro不会帮你去创建目录。这个时候调用依然会是metro的server,只不过最终会输出bundle文件到指定目录。
打包后的bundle文件跟开发中的结构是一致的,但是我们仔细看就会发现模块id变少了,前面的polyfill文件一样的,都是第一个模块ID都是11,也就是启动文件,那么就是中间的模块便少了,其实就是一些公共模块做了合并,所以看起来少了。

总结

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 205,132评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,802评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,566评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,858评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,867评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,695评论 1 282
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,064评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,705评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 42,915评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,677评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,796评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,432评论 4 322
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,041评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,992评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,223评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,185评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,535评论 2 343

推荐阅读更多精彩内容

  • 1 Webpack 1.1 概念简介 1.1.1 WebPack是什么 1、一个打包工具 2、一个模块加载工具 3...
    Kevin_Junbaozi阅读 6,638评论 0 16
  • RN拆包工具是为了解决RN产出的bundler包文件过大问题的打包工具;可以按需将模块按照基础&业务生成两个文件。...
    乘着风阅读 5,407评论 2 22
  • #见字如面# 听雨、习字…… 《虞美人.听雨》 少年听雨歌楼上 红燭昏罗帐 壮年听雨客舟中 江闊雲低 断㕍叫西風 ...
    英曼绘生活阅读 355评论 0 1
  • 春 是嫩芽枝头 是细雨绵绵 是穿着雨鞋走过草坪的一弯水 是举着风筝奔跑放飞的一片天 夏 知了吱呀,树影婆娑 那个犯...
    Cassy同学阅读 238评论 0 0
  • “心智决定视野,视野决定格局,格局决定命运,命运决定未来。”这可以说是德鲁克一生的写照。德鲁克通过自我管理奠定了其...
    Bluce数据苦行僧阅读 209评论 0 0