1.请教下，源码ADT-Bundle的源码eclipse中怎么修改编码格式？
2.有一个APP的源代码怎么运营
3.Hermes源码分析（二）——解析字节码
4.代码拆分-使用SplitChunks
5.源码级解析，搞懂 React 动态加载（上） —— React Loadable
请教下，源码ADT-Bundle的源码eclipse中怎么修改编码格式？
Eclipse更改编码，分为workspace工作间编码更改、源码Android Project编码更改和当前类文件编码更改
1.工作间编码更改，源码java源码下载地址点击菜单“Window——>Preferences——>General——>Workspace”，源码默认GBK编码，源码选择UTF-8编码
2.Android Project编码更改，源码点击需要更改的源码项目，鼠标右键“Properties——>Resource”查看当前Project编码，源码切换UTF-8
3.当前类文件编码更改，源码在项目中使用了GBK，源码但是源码如果复制过来的类是UTF-8编码，需将UTF-8转换成GBK，源码才不至于出现乱码，使用EditPlus打开UTF-8的文件，“File——>Save as ——>Encoding——>Chinese Simplipied (GB)”，最后将文件复制到项目中
有一个APP的源代码怎么运营
1、首先需要下载一个APP的开发工具，这里使用的是开发安卓的ADT-bundle工具。
2、打开这个开发工具，然后创建一个项目。
3、然后输入项目的APP名称，项目名称，包名，网站 源码下载器点击下一步。
4、然后这一步是选择SDK的版本，默认既可以了，直接点击下一步。
5、然后这一步是选择APP的图标，选择完成之后点击下一步。
6、然后这一步是选择界面的模版，这里选择空白模版“Blank Activity”既可以了，点击下一步。
7、然后这一步是输入主界面的名字，默认就可以了，点击完成。
8、然后项目就创建完成了，项目的结构如下。
Hermes源码分析（二）——解析字节码
前面一节 讲到字节码序列化为二进制是有固定的格式的，这里我们分析一下源码里面是怎么处理的这里可以看到首先写入的是魔数，他的值为
对应的二进制见下图，注意是小端字节序
第二项是字节码的版本，笔者的版本是，也即 上图中的4a
第三项是源码的hash，这里采用的是SHA1算法，生成的免费php商业源码哈希值是位，因此占用了个字节
第四项是文件长度，这个字段是位的，也就是下图中的为0aa，转换成十进制就是，实际文件大小也是这么多
后面的字段类似，就不一一分析了，头部所有字段的类型都可以在BytecodeFileHeader.h中看到，Hermes按照既定的内存布局把字段写入后再序列化，就得到了我们看到的字节码文件。
这里写入的数据很多，以函数头的写入为例，我们调用了visitFunctionHeader方法，并通过byteCodeModule拿到函数的签名，将其写入函数表（存疑，在实际的文件中并没有看到这一部分）。注意这些数据必须按顺序写入，因为读出的时候也是按对应顺序来的。
我们知道react-native 在加载字节码的时候需要调用hermes的prepareJavaScript方法， 那这个方法做了些什么事呢？
这里做了两件事情：
1. 判断是否是字节码，如果是则调用createBCProviderFromBuffer，否则调用createBCProviderFromSrc，我们这里只关注createBCProviderFromBuffer
2.通过BCProviderFromBuffer的构造方法得到文件头和函数头的信息（populateFromBuffer方法），下面是这个方法的实现。
BytecodeFileFields的populateFromBuffer方法也是一个模版方法，注意这里调用populateFromBuffer方法的是一个 ConstBytecodeFileFields对象，他代表的是不可变的字节码字段。
细心的小漫画系统源码读者会发现这里也有visitFunctionHeaders方法， 这里主要为了复用visitBytecodeSegmentsInOrder的逻辑，把populator当作一个visitor来按顺序读取buffer的内容，并提前加载到BytecodeFileFields里面，以减少后面执行字节码时解析的时间。
Hermes引擎在读取了字节码之后会通过解析BytecodeFileHeader这个结构体中的字段来获取一些关键信息，例如bundle是否是字节码格式，是否包含了函数，字节码的版本是否匹配等。注意这里我们只是解析了头部，没有解析整个字节码，后面执行字节码时才会解析剩余的部分。
evaluatePreparedJavaScript这个方法，主要是调用了HermesRuntime的 runBytecode方法，这里hermesPrep时上一步解析头部时获取的BCProviderFromBuffer实例。
runBytecode这个方法比较长，主要做了几件事情：
这里说明一下，Domain是用于垃圾回收的运行时模块的代理， Domain被创建时是空的，并跟随着运行时模块进行传播， 在运行时模块的整个生命周期内都一直存在。在某个Domain下创建的所有函数都会保持着对这个Domain的强引用。当Domain被回收的时候，这个Domain下的所有函数都不能使用。
未完待续。。。
代码拆分-使用SplitChunks
前言
探索代码优化的网页邮箱发送源码世界，最近开始接触项目优化工作，其中涉及三方组件的拆分。在未进行拆分前，可能存在两个场景：单一js文件过大，影响缓存效率；无法有效管理第三方库。利用`splitChunks`工具，可以将模块进行分割，并提取重复代码，解决上述问题。
概念区分 - module、bundle、chunk
深入理解`splitChunks`之前，先梳理几个概念。module：模块，在webpack中，任何文件都可视为模块，需要配置loader将其转换为支持打包的文件。chunk：编译完成待输出时，webpack将module按特定规则组合成一个个chunk。bundle：webpack处理完chunk文件后，生成供浏览器运行的代码。
chunk与bundle的关系
探析chunk的构成与bundle之间的关联。chunk有两种形式：初始化（initial）chunk，即入口起点的主chunk，包含入口起点及其依赖的所有模块；非初始化（non-initial）chunk，用于延迟加载，可能在使用动态导入或`SplitChunksPlugin`时出现。
通过入口产生的chunk
假设目录结构如下：index.js, another-module.js, webpack.config.js, package.json添加script配置，运行webpack并使用ndb追踪代码执行。通过命令启动浏览器，点击播放按钮执行build命令，追踪chunk到bundle的流转。
chunk处理步骤概览
从`Compilation`类的`seal`方法出发，首先搜集chunks，然后调用`createChunkAssets`方法生成source，为输出文件做准备；通过`compilation.emitAssets`方法记录资源信息到`compilation.assets`对象；一系列回调最终调用`onCompiled`方法，将assets信息写入输出目录，生成bundle文件。
Demo2 - 动态导入
将`index.js`中的lodash通过`import`方式导入，动态导入返回promise，通过`then`获取导入信息。修改`webpack.config.js`入口为单个`index.js`。源码追踪显示，初始化文件新增一个名为`index`的chunk，但在模块分析中识别到`import`方式，为`index.js`模块增加了`AsyncDependenciesBlock`标记，经过处理生成一个名为`null`的chunk。
总结：`chunk`是源代码中的抽象，封装定义如何将模块组写入文件，而`bundle`则是输出目录的文件。
解决隐患 - `splitChunks`配置
在上述示例中，存在三方模块重复引用的问题。通过简单的`optimization.splitChunks`配置，实现了lodash的抽离，降低了单个入口文件的大小。总结使用心得，`splitChunks`主要用于代码优化，针对不同场景配置`chunks`选项，如`all`、`async`、`initial`以及自定义函数，以达到高效拆分效果。
比较`async`、`initial`、`all`的区别
在示例中增加`another.js`，静态导入lodash，对比`async`、`all`、`initial`的不同效果。默认情况下，`initial`影响HTML文件中的脚本标签，而`async`仅针对动态导入，`all`则考虑更多场景，适合存在复用模块的情况，但需权衡动态导入及其内部依赖的抽离。
splitChunks.cacheGroups
在使用`splitChunks`基础上，通过`cacheGroups`实现更细粒度的代码拆分，进一步优化项目结构。
总结
通过`splitChunks`配置，实现三方组件的高效管理与拆分，优化代码结构与加载效率。理解模块、bundle、chunk之间的关系，以及如何利用`splitChunks`与`cacheGroups`进行代码拆分与优化，是提升项目性能的关键步骤。
源码级解析，搞懂 React 动态加载（上） —— React Loadable
本系列深入探讨SPA单页应用技术栈，首篇聚焦于React动态加载机制，解析当前流行方案的实现原理。
随着项目复杂度的提升和代码量的激增，如企业微信文档融合项目，代码量翻倍，性能和用户体验面临挑战。SPA的特性使得代码分割成为优化代码体积的关键策略。
code-splitting原理在于将大型bundle拆分为多个，实现按需加载和缓存，显著降低前端应用的加载体积。ES标准的import()函数提供动态加载支持，babel编译后，import将模块内容转换为ESM数据结构，通过promise返回，加载后在then中注册回调。
webpack检测到import()时，自动进行code-splitting，动态import的模块被打包到新bundle中。通过注释可自定义命名，如指定bar为动态加载bundle。
实现简易版动态加载方案，利用code-splitting和import，组件在渲染前加载，渲染完成前展示Loading状态，优化用户体验。然而，复杂场景如加载失败、未完成等需要额外处理。
引入React-loadable，动态加载任意模块的高阶组件，封装动态加载逻辑，支持多资源加载。通过传入参数如模块加载函数、Loading状态组件，统一处理动态加载成功与异常。
通过react-loadable改造组件，实现加载前渲染Loading状态，加载完成后更新组件。支持单资源或多资源Map动态加载，兼容多种场景。
Loadable核心是createLoadableComponent函数，采用策略模式，根据不同场景（单资源或多资源Map）加载模块。load方法封装加载状态与结果，loadMap方法加载多个loader，返回对象。
LoadableComponent高阶组件实现逻辑简单，通过注册加载完成与失败的回调，更新组件状态。默认渲染方法为React.createElement()，使用Loadable.Map时需显式传入渲染函数。
在服务端渲染（SSR）场景下，动态加载组件无法准确获取DOM结构，react-loadable提供解决方案，将异步加载转化为同步，支持SSR。
React loadable原始仓库不再维护，局限性体现在适用的webpack与babel版本、兼容性问题以及不支持现代React项目。针对此问题，@react-loadable/revised包提供基于Hooks与ts重构的解决方案。
React-loadable的实现原理与思路较为直观，下文将深入探讨React.lazy + Suspense的原生解决方案，理解Fiber架构中的动态加载，有助于掌握更深层次的知识。
