React|React Native打包总结 ReactNative打包总结

打包的命令
react-native bundle命令，其中参数如图所示：

文章图片
react-native bundle的参数介绍其中主要参数的含义是：

entry-file：js的根文件，在RN中一般是index.js或index.android.js/index.ios.js
platform：平台，iOS或Android
dev：开发者模式，若是false，警告会被禁止，bundle文件会被压缩
bundle-output: 生成的bundle文件名
assets-dest: 资源文件的文件夹

android: react-native bundle --entry-file ./index.js --dev false --bundle-output ./android/app/src/main/assets/bundle/index.android.jsbundle --assets-dest ./android/app/src/main/res/ --platform androidios基本类似： react-native bundle --entry-file ./index.js --dev false --bundle-output ./ios/index.ios.jsbundle --assets-dest ./ios --platform ios

这些打包命令很长，参数多，我们可以在package.json文件中添加这些脚本命令:

"scripts": { "bundle-android": "react-native bundle --entry-file ./index.js --dev false --bundle-output ./android/app/src/main/assets/bundle/index.android.jsbundle --assets-dest ./android/app/src/main/res/ --platform android", "bundle-ios": "react-native bundle --entry-file ./index.js --dev false --bundle-output ./ios/index.ios.jsbundle --assets-dest ./ios --platform ios", }

以后我们打bundle离线包，只需要执行npm脚本npm run bundle-android和npm run bundle-ios即可。
bundle文件分析
为了方便分析bundle文件的构成，研究打包的原理。我们打dev模式下的bundle包进行分析。
dev模式下的bundle文件