ReactNative系列之十九metro-bundle主要api简介及优化打包实现

1.RN的打包bundle概要

从ReactNative的0.50(准确来讲应该是0.4x)之后到目前的最新版本0.55版本,都使用metro-bundle来进行压缩打bundle文件。实际上打bundle的好处有几个1.100个文件打包成一个文件,jsCore加载时效率相对高很多2.经过打压后,通过精简算法把总体文件变小,从而降低整体apk的体量

2.Bundle文件的介绍

bundle文件其实没那么神秘,就是一个String,可以让jsCore 识别。那么bundle文件主要有几部分,1.ReactNative预加载的部门,一般在bundle的最开始部分。2,__d开头的文件,一般为每一个js文件或资源文件,将其封装成一个module对象,并进行标号。3.bundle文件尾部指定入口文件,如require(59); require(1000), 59可以找到是InitializeCore,这个加载了js-c++-java三层的通信注册类,通信临听类等,,,Appregistry,,,registerLazyCallableModule,,setGlobalHandler,,等是不是很熟悉?如果不熟悉,你还不了解RN的通信

3. Metro-bundler的主要api


4、拆包优化思路

1)为什么要拆包,上层业务模块很多,抽像一个基础模块,所有模块被拆为N+1个bundle包,N是业务模块

2)metro-bundle把每一个module对应了一个moduleID, 每个文件require时也指向了这个moduleId,所以我们可以将所有的业务模块+基础模块都进行编号,比如把common模块设置成0-1000, 第一个业务模块为1001-2001,依次而定。然每一个业务模块包打出来后,再将基础模块的bundle包使用comm命令比对分开。

3)还有一个细节,如果common包增加新文件,有可能moduleID就混乱了?造成上层所有的业务模块指向的common中的module文件混乱? 我们可以在打包时将打过的module文件和moduleID记录成文件保存下,以后再生成bundle文件时再指定原有的moduleId,对common中新加的文件再分配新的moduleId,然后再记录就成了。这样就可以使common的bundle,与业务的bundle升级灵活,不会造成什么依赖!

后续会在github上放源码,欢迎关注

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
steer-react-scripts是基于create-react-app的自定义脚本,它的打包速度优化可以通过配置webpack进行实现。下面给出一些具体的代码实现: 1. 代码分割 ```javascript // webpack.config.js module.exports = { optimization: { splitChunks: { cacheGroups: { commons: { test: /[\\/]node_modules[\\/]/, name: 'vendors', chunks: 'all', }, }, }, }, }; ``` 2. Tree Shaking ```javascript // webpack.config.js module.exports = { mode: 'production', optimization: { usedExports: true, sideEffects: true, }, }; ``` 3. 懒加载 ```javascript // App.js import React, { lazy, Suspense } from 'react'; const OtherComponent = lazy(() => import('./OtherComponent')); function MyComponent() { return ( <div> <Suspense fallback={<div>Loading...</div>}> <OtherComponent /> </Suspense> </div> ); } ``` 4. 开启缓存 ```javascript // webpack.config.js module.exports = { module: { rules: [ { test: /\.js$/, use: ['cache-loader', 'babel-loader'], include: path.resolve(__dirname, 'src'), }, ], }, }; ``` 5. 优化资源 ```javascript // webpack.config.js module.exports = { module: { rules: [ { test: /\.(png|jpe?g|gif)$/i, use: [ { loader: 'url-loader', options: { limit: 8192, name: '[name].[ext]', outputPath: 'images', }, }, ], }, { test: /\.(woff|woff2|eot|ttf|otf)$/i, type: 'asset/resource', generator: { filename: 'fonts/[name][ext]', }, }, ], }, }; ``` 6. 优化babel配置 ```javascript // babel.config.js module.exports = { presets: ['@babel/preset-env', '@babel/preset-react'], plugins: ['@babel/plugin-transform-runtime'], }; ``` 7. 优化webpack配置 ```javascript // webpack.config.js const BundleAnalyzerPlugin = require('webpack-bundle-analyzer') .BundleAnalyzerPlugin; module.exports = { plugins: [new BundleAnalyzerPlugin()], }; ``` 以上是一些steer-react-scripts优化打包速度的代码实现,具体实现可以根据实际情况进行调整和优化

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值