使用react-native bundle制作离线包

墨衍会员 · AI 创作全网分发 墨衍智能分发 本文由作者通过墨衍一键同步至各平台 1分发平台 5.7k累计阅读 5.7k平均单平台已同步平台优快云微信公众号微博知乎掘金百家号博客园抖音小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年，写一次发全网我也要 → 码龄11年

关注

原创最新推荐文章于 2026-10-13 20:00:01 发布 5.7k 阅读 AI 写同款· GEO 优化 ›

React native拆包的正确姿势——基于metro bundle 1、分包观察现在一些接入React native的大厂，如菜鸟、大搜车、去哪儿，都将react native 的jsbundle分为几个包来使用。作用是啥？为什么要这么折腾？像去哪儿、腾讯或者携程都发布了一些文章来阐述分包的原因了，不了解的可以去搜索看看。我这边只总结下：react native原生打出来的包都只有一个jsbundle(除了rambundle)，里面包含了所有你写代码和re... 阅读详情

公司项目以离线包的方式使用react-native开发。
相关命令：

react-native bundle --entry-file index.ios.js --bundle-output ./ios/main.jsbundle --platform ios

相关参数可以使用如下命令查询：

react-native bundle -help

也可以将命令添加到package.json文件中方便使用：

"scripts": {
    "iosbundle": "react-native bundle --entry-file index.ios.js --bundle-output ./ios/main.jsbundle --platform ios",
}

下次打包运行：

npm run iosbundle

收录于

react-native

当前文章被收录于：

react-native

5 篇文章 0 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

标签

#react-native #jsbundle

React Native 热加载指定目录bundle资源 ReactNative在Android环境中运行时候会先将RN相关资源打包并合并到android应用的assets目录，相关资源包内容如下（包括但不限于一下资源，这里是demo，比较简单）： Drawable-x包下面主要是一些图片的资源 raw包配置相关资源 index.androd.bindle是js相关代码打包后的特殊格式文件，其中包含应用相关信息等，也只android应用主要加载... 阅读详情

相关推荐

鸿蒙环境添加React Native的bundle包

3.打开 RNApplication\entry\build-profile.json5，将 cpp 中的代码添加到应用工程的编译构建任务中。将RNProject\harmony\entry\src\main\resources\rawfile目录下的 bundle 文件和 assets 文件夹粘贴复制到HarmonyOS工程RNApplication\entry\src\main\resources\rawfile路径下，在 entry/src/main/ets/pages/Index.ets 中使用。

旭日的博客 1337

react-native 热更新优化实践

idaretobe的专栏 1195

React native拆包之原生加载多bundle（iOS&Android）

在这之前已经描述了0.57版本的react native如何拆包：https://blog.youkuaiyun.com/tyro_smallnew/article/details/83088216（React native拆包的正确姿势），对于原生如何加载多个js包的方法只是简单的描述下，现在开始补坑。 0、rn之jsbundle 当然我们都知道jsbundle是什么(就是我们打包出来的js包，...

tyro_smallnew的专栏 9847

React-Native iOS打包

通过React Native的react-native bundle命令来进行打包的。react-native bundle的详细命令选项。,ios或者android入口的js名称，比如index.ios.js–platform,平台名称(ios或者android)–dev,设置为false的时候将会对JavaScript代码进行优化处理。, 生成的jsbundle文件的名称，比如release_ios/main.jsbundle图片以及其他资源存放的目录,比如release_ios/导出。

Mr_Roki的博客 1031

React_Native拆分bundle之patch拆包

为什么要拆包背景介绍随着RN的包越来越大，第一次载入RN包的时长越来越长，用户需要等待的时间也就越长，体验较差。另外多个团队开发的话，互相之间的依赖也是个大问题，出现编译不过的话，就会出现水桶效应，所有的团队都要等待这个有问题的团队，从而拉低了整体的效率。另外我一直希望，能够将React-Native的业务功能，做成类似小程序一样：即用即载入，随时可以更新。想想我们的app里面包含了多少个用户也许永

njafei的博客 1553

AD2428与SigmaStudio：从节点自动配置与EEPROM存储实战

本文详细介绍了AD2428 A2B收发器与SigmaStudio开发环境的集成应用，重点讲解从节点自动配置与EEPROM存储的实战流程。通过硬件连接、属性配置、数据导出及嵌入式系统集成等步骤，实现设备上电自启动，提升汽车音频系统的可靠性与部署效率。

g8f9d0s1a2的博客 650

react-native 打包apk 之安卓离线包全过程

前言: 完成项目时,我们需要将项目打包成一个apk,方便测试以及发布版本. 这时,需要把js代码和图片资源都放进apk中, 并且发布版本还需要签名,今天把这一系列操作记录下来. 一.生成离线bundle包 离线包就是把 ReactNative 和你写的 js文件、图片等资源都打包放入 App ，不需要走网络下载。首先看一下官方给的参数(中文版): react-native...

卓原的进化之旅 2万+

sm2国密加密算法js实现(真实可用)

sm2国密加密算法js实现加密后内容引入文件js实现sm2加密加密后内容可自行验证是否是你需要的sm2加密算法私钥：BF1F907B4E0487F798DC80AFD7BC2A6201E8514233002272EA3BE2FC6F797843 公钥:前缀04+x坐标+y坐标 042DBA45E7B03394F603CADAFCDDEC854D3E01A4E9C52CD799B85B1A14BDB970137AE58BA553D79F058604DC1CD4B77DE5408BA3308E767584

gusijin的博客 1万+

react native app离线打包准备

Android新增main.jsbundle文件首先在浏览器打开http://localhost:8081/index.ios.bundle?platform=android&dev=false（根据自己项目及平台来），然后将自己创建一个文件main.jsbundle来保存此网址返回的代码，最后放到Android的assets目录中新增写文件代码 private static final Strin

honaf的专栏 3476

第二章零差云控关节模组内部构造

对零差云控的eRob70I进行了拆解

SFY__优快云的博客 5964

【AI蛋白预测实战】零门槛在Colab上运行AlphaFold2全流程解析

本文为零基础用户提供了在谷歌Colab平台上运行AlphaFold2进行蛋白质结构预测的完整实战指南。通过ColabFold项目，用户无需本地高性能硬件，即可免费利用云端GPU完成从序列输入到3D结构生成和结果可视化的全流程，大幅降低了AI蛋白预测的技术门槛。

mqtt6iot的博客 912

ReactNative生成android平台的bundle文件命令

ReactNative生成android平台的bundle文件命令 2016年11月03日 23:23:28 阅读数：4869 注：如果assets文件没有正确生成，需要手机创建或授权网上的其它的很多都不好用，这个是好用的进行React Native的根目录下执行以下命令命令一 node node_modules/react-native/...

weixin_30567225的博客 153

Python爬虫实战：构建高可用静态网页爬虫 - 以 Quotes 网站数据采集为例！

我长期专注 Python 爬虫工程化实战，主理专栏《Python爬虫实战》：从采集策略到反爬对抗，从数据清洗到分布式调度，持续输出可复用的方法论与可落地案例。内容主打一个“能跑、能用、能扩展”，让数据价值真正做到——抓得到、洗得净、用得上。

喵手的博客 461

《React-Native系列》8、RN如何打离线包

上一篇文章我们谈了bundle文件的加载和维护，以及在线包和离线包的区别，那我们今天来谈谈ReactNative如何打离线包。我们先来看看官网怎么说的 Building your app for production You have built a great app using React Native, and you are now itching to rel

等待就是浪费青春 8294

华为OD机试真题 Java&Go 实现【优雅子数组】【100%通过率】【2022.11 Q4 新题】

如果一个数组中出现次数最多的元素出现大于等于K次，被称为K -优雅数组，k也可以被称为优雅阈值。例如，数组1，2，3，1、2，3，1，它是一个3-优雅数组，因为元素1出现次数大于等于3次，数组1,2,3,1,2就不是一个3-优雅数组，因为其中出现次数最多的元素是1和2，只出现了2次。给定一个数组A和k，请求出A有多少子数组是k-优雅子数组。

MISAYAONE的博客 1万+

6.8 点云相关软件——CoProcess

摘要 CoProcess是华测导航研发的三维点云全流程处理平台，支持海量数据浏览、编辑及多类型成果输出，适配地形测绘、道路建设等行业需求。软件采用模块化设计，包含基础功能（数据导入、分类、建模等）和行业定制模块（地形、道路、矿山等），支持多格式数据交互与自动化处理，显著提升作业效率。相比Lidar360，CoProcess操作更简便、性价比更高；相比开源工具CloudCompare，其行业适配性与专业功能更优。2025版本优化了数据处理性能与智能算法，需授权激活高级功能，适合商业项目应用。

qq625924821的博客 248

react-native bundle 到 bundle 生成到底发生了什么(metro 打包流程简析)

本文涉及react-native及metro版本 react-native@0.63.2 metro@0.58.0 先来看一波本文的实例代码:很简单吧，一个你好，世界 // App.js import React from "react"; import { StyleSheet, Text, View } from "react-native"; export default class App extends React.Component { render() { retu...

大灰狼的小绵羊哥哥的博客 3412

基于深度学习的堰塞坝表层颗粒物质识别研究

本文提出一种基于深度学习的堰塞坝表层颗粒物质智能识别方法，针对颗粒分布散乱、背景复杂的问题，采用"大颗粒逐个识别、密集小颗粒分块识别"策略。结合Mask R-CNN、SLIC和AlexNet构建识别模型，通过无人机影像实现自动识别。实验表明该方法精度超过90%，具备迁移能力。文章提供了Python实现代码，涵盖数据预处理、SLIC分割、模型构建（Mask R-CNN和AlexNet）及训练流程，为堰塞坝应急抢险提供技术支持。

huanghm88的专栏 181

React Native Bundle Visualizer 项目教程

React Native Bundle Visualizer 项目的目录结构如下： ``` react-native-bundle-visualizer/ ├── src/ │ ├── index.ts │ ├── utils/ │ └── ... ├── test/ │ ├── index.test.ts │ └── ... ├── .gitignore ├── CHANG...

gitblog_01006的博客 1203

计算机控制技术及应用

《计算机控制技术及应用》通过总结作者的科研成果和吸收国内外的先进理论、方法和技术，以计算机控制系统的网络化、开放化、智能化和集成化发展趋势为主线索，主要介绍计算机控制系统的基本概念和计算机控制系统的典型形式，计算机控制系统的数学描述与基本分析方法，以及数字PID控制器、最少拍控制系统、达林算法、状态变量设计法等设计方法及其各种改进算法。重点突出计算机控制系统输入输出通道接口的设计方法和典型控制系统的设计案例与实现方法等。

蓝牙模块HM-10手册

蓝牙模块HM-10手册，该手册对蓝牙模块HM-10进行了详细的介绍和使用方法以及一些AT指令。

React Native Bundle Splitter 使用教程

React Native Bundle Splitter 使用教程项目介绍 React Native Bundle Splitter 是一个用于轻松分割 React Native 应用 JavaScript 包的工具。它允许开发者将应用的不同部分（如屏幕、组件等）分割成独立的 JavaScript 包，从而提高应用的加载速度和性能。该工具支持所有主流的导航库，并且提供了增强的缓存管理功能，确保组...

gitblog_01153的博客 851

LinePhone3.2.7(android端最新版本) sip客户端

SIP客户端For android：LinePhone3.2.7(最新版本)，官网地址：http://www.linphone.org/

Expo与React Native CLI项目通用：react-native-bundle-visualizer使用指南

react-native-bundle-visualizer是一款实用的工具，能够帮助开发者清晰了解React Native项目的bundle文件构成，找出哪些包占用了过多空间，从而优化应用体积。无论是使用Expo还是React Native CLI创建的项目，都能轻松适配。 ## 🌟 为什么需要分析React Native Bundle大小随着React Native项目的不断迭代，引入

gitblog_01171的博客 1181

Data-Structures-and-Algorithm-Analysis-in-Java.pdf

作者: Weiss, Mark A. 出版社: Addison Wesley Data Structures and Algorithm Analysis in Java is an “advanced algorithms” book that fits between traditional CS2 and Algorithms Analysis courses. In the old ACM Curriculum Guidelines, this course was known as CS7. This text is for readers who want to learn good programming and algorithm analysis skills simultaneously so that they can develop such programs with the maximum amo...

《React-Native系列》40、 ReactNative之bundle文件瘦身

【背景】目前，我们的app中采用Native+RN的混合模式开发，每个由RN开发的页面，页面的加载都是加载的一个Bundle文件，而一个Bundle文件的大小为500-600Kb。在没有内置bundle文件的情况下，用户想要使用所有由RN开发的功能，需要下载 n* 500 kb的文件。在有内置bundle文件的情况下，如果一个页面有更新，那么用户至少需要下载500kb的文件。在移动端，频繁的需要去

等待就是浪费青春 8412

【亲测免费】 React Native 多Bundle拆包工具 —— react-native-multibundler

`react-native-multibundler` 是一个基于 React Native 的 metro bundler 的配置化开发工具，主要用于处理分包需求。该项目支持 iOS 和 Android 平台，使用官方的 metro 拆包方法，使得分包过程更加灵活稳定。项目主要使用 JavaScript、Java 和 Objective-C 等编程语言开发。 ## 2. 核心功能 - **可...

gitblog_00887的博客 1162

android+rn+离线包,React Native bundle打离线包

如何打包呢？react-native bundle–entry-file ,ios或者android入口的js名称，比如index.ios.js–platform ,平台名称(ios或者android)–dev ,设置为false的时候将会对JavaScript代码进行优化处理–bundle-output, 生成的jsbundle文件的名称，比如./ios/index.ios.jsbundle–a...

weixin_42627812的博客 408

react-native bundle

react-native bundle 初学 –entry-file js file 根文件 –bundle-output bundle 输出文件 –dev [boolean] false:会压缩 bundle 文件。 true:不压缩 bundle 文件。 –platform [string] ios or android –assets-dest [string] bundle 中引用的图...

csdn_coder_zxq的博客 537

React Native OpenHarmony 化 JS Bundle 打包全指南：从 Metro 配置到拆包与字节码

React Native 应用在发布前会将全部 JavaScript 代码与资源打包成一个或多个 bundle 文件，以提升加载速度、减少网络请求。本文聚焦 React Native OpenHarmony（RNOH）化工程中的 JS 打包流程：先说明 `react-native-harmony` 提供的 Metro 打包配置与 `react-native-harmony-cli` 提供的 `re