JS `AOT` (Ahead-of-Time) 编译在 `React Native` / `Electron` 中的应用

各位观众老爷们，大家好！今天咱们来聊聊JavaScript AOT（Ahead-of-Time）编译在React Native和Electron中的应用，保证让各位听得明白，笑得开心，学得扎实。

开场白：JavaScript，你这磨人的小妖精

JavaScript，这门语言，真是让人又爱又恨。爱它灵活，上手快，恨它性能，容易出幺蛾子。尤其是在React Native和Electron这种对性能要求较高的场景下，JavaScript的性能问题就更加凸显了。想想看，你辛辛苦苦写的代码，在用户手机上卡成PPT，那感觉，简直比吃了苍蝇还难受！

那么，有没有什么办法能够让JavaScript跑得更快呢？答案是肯定的，那就是AOT编译！

什么是AOT编译？别怕，没那么高深！

AOT，也就是Ahead-of-Time编译，顾名思义，就是在程序运行之前就进行编译。这和我们平时常用的JIT（Just-in-Time）编译不一样。JIT编译是在程序运行的时候才进行编译，也就是“边跑边编译”。

你可以把JIT编译想象成一个临时抱佛脚的学生，考试的时候才开始学习，效率自然不高。而AOT编译就像一个提前预习的学生，考试的时候已经胸有成竹，效率自然更高。

特性	JIT编译 (Just-in-Time)	AOT编译 (Ahead-of-Time)
编译时机	运行时	编译时
启动速度	较慢	较快
运行时性能	可能达到峰值性能	性能更稳定
平台依赖性	更高	更低
二进制文件大小	较小	较大
适用场景	快速原型开发, 动态更新	性能敏感, 资源受限设备

AOT编译的优势：快！稳！省！

AOT编译的优势主要有以下几点：

• 启动速度快： 因为代码在运行之前就已经编译好了，所以启动速度更快，用户体验更好。
• 运行时性能稳定： 避免了JIT编译带来的性能抖动，运行时性能更加稳定。
• 节省资源： 因为不需要在运行时进行编译，所以可以节省CPU和内存资源，尤其是在移动设备上，这一点非常重要。

React Native中的AOT编译：Hermes引擎来救场

React Native默认使用的是JavaScriptCore引擎，这个引擎虽然不错，但是性能还是有提升空间的。于是，Facebook推出了Hermes引擎，专门为React Native优化。

Hermes引擎的核心特性之一就是AOT编译。它可以将JavaScript代码编译成高效的字节码，从而提高React Native应用的性能。

如何使用Hermes引擎？很简单！

1. 安装依赖：

   yarn add react-native-hermes

2. 修改android/app/build.gradle文件：

   android {
       ...
       defaultConfig {
           ...
           ndk {
               abiFilters "armeabi-v7a", "x86", "x86_64", "arm64-v8a"
           }
       }
       ...
   }

3. 修改android/gradle.properties文件：

   hermesEnabled=true

4. 配置 Metro bundler（metro.config.js）：

   const path = require('path');
   
   module.exports = {
     transformer: {
       babelTransformerPath: require.resolve('react-native-babel-transformer'),
     },
     resolver: {
       assetExts: ['cjs', 'js', 'ts', 'tsx', 'json', 'png', 'jpg', 'jpeg', 'gif', 'svg'], // 处理更多资源类型
       sourceExts: ['js', 'jsx', 'ts', 'tsx', 'cjs', 'json'], // 处理更多源代码类型
     },
     serializer: {
       createModuleIdFactory: () => {
         let moduleId = 0;
         return () => moduleId++;
       },
       processModuleFilter: (module) => {
         // Exclude modules that should not be included in the bundle
         return true;
       },
       getTransformOptions: async () => ({
         transform: {
           experimentalImportSupport: false,
           inlineRequires: true,
         },
       }),
     },
   };

5. 重新构建应用：

   react-native run-android

   或者

   react-native run-ios

Hermes引擎优化技巧：让你的应用飞起来！

• 使用use strict： 严格模式可以帮助Hermes引擎进行更好的优化。
• 避免使用eval和Function构造函数： 这两个东西会破坏AOT编译的效果。
• 优化JavaScript代码： 尽量减少不必要的计算和内存分配。

Electron中的AOT编译：V8 Snapshots来帮忙

Electron是一个使用JavaScript、HTML和CSS构建桌面应用的框架。它基于Chromium和Node.js，所以也可以使用V8引擎的特性。

V8引擎提供了一个叫做V8 Snapshots的功能，可以将JavaScript代码编译成快照，从而提高Electron应用的启动速度。

如何使用V8 Snapshots？有点复杂，但是很值得！

1. 安装依赖：

   我们需要一个工具来生成快照。这里推荐使用snapshot-require。

   npm install snapshot-require --save-dev

2. 创建快照生成脚本：

   创建一个脚本，例如snapshot.js，用于生成快照。

   const snapshotRequire = require('snapshot-require');
   const fs = require('fs');
   const path = require('path');
   
   // 定义入口文件
   const entryPoint = path.join(__dirname, 'main.js');
   
   // 定义快照输出路径
   const snapshotFile = path.join(__dirname, 'snapshot.blob');
   
   // 生成快照
   snapshotRequire({
     entryPoint: entryPoint,
     snapshotFile: snapshotFile,
     nodeModulesOnly: false, // 包含所有模块，包括项目自身的代码
     useCache: true,      // 启用缓存
     cacheDir: path.join(__dirname, '.snapshot_cache'), // 缓存目录
     diagnose: false,     // 禁用诊断信息
     minify: true,         // 压缩快照文件
     auxiliaryFiles: [],   // 辅助文件，如CSS、图片等
     customRequire: null,   // 自定义require函数
     includeModule: (modulePath) => {
       // 添加白名单，只包含指定的模块
       // return modulePath.includes('your-module');
       return true; // 包含所有模块
     },
     excludeModule: (modulePath) => {
       // 添加黑名单，排除指定的模块
       return false;
     },
     transform: (code, filename) => {
       // 转换代码，例如使用Babel
       // return require('@babel/core').transformSync(code, { filename: filename, presets: ['@babel/preset-env'] }).code;
       return code;
     }
   });
   
   console.log('Snapshot created successfully!');

3. 运行快照生成脚本：

   node snapshot.js

   这个命令会在当前目录下生成一个snapshot.blob文件。

4. 修改Electron主进程代码：

   在Electron的主进程代码中，我们需要加载生成的快照。

   const { app, BrowserWindow } = require('electron');
   const path = require('path');
   const fs = require('fs');
   
   let mainWindow;
   
   function createWindow() {
     mainWindow = new BrowserWindow({
       width: 800,
       height: 600,
       webPreferences: {
         nodeIntegration: true,
         contextIsolation: false, // 禁用上下文隔离，否则preload.js无法访问node
         preload: path.join(__dirname, 'preload.js')
       }
     });
   
     // 加载快照
     const snapshotPath = path.join(__dirname, 'snapshot.blob');
     if (fs.existsSync(snapshotPath)) {
       try {
         require('v8-compile-cache'); // 需要安装 v8-compile-cache
         const { readFileSync } = require('fs');
         const { compileFunctionInContext, createContext } = require('vm');
   
         const snapshot = readFileSync(snapshotPath);
         const context = createContext({
             require,
             exports,
             module,
             __filename: __filename,
             __dirname: __dirname,
             console,
             process,
             Buffer,
             setTimeout,
             setInterval,
             clearTimeout,
             clearInterval
         });
   
         compileFunctionInContext(snapshot, [], context);
   
         console.log("Snapshot loaded successfully!");
       } catch (error) {
         console.error("Failed to load snapshot:", error);
         mainWindow.loadFile('index.html'); // 如果快照加载失败，加载普通HTML文件
       }
     } else {
       mainWindow.loadFile('index.html'); // 如果快照文件不存在，加载普通HTML文件
     }
   
     mainWindow.on('closed', function () {
       mainWindow = null;
     });
   }
   
   app.on('ready', createWindow);
   
   app.on('window-all-closed', function () {
     if (process.platform !== 'darwin') app.quit();
   });
   
   app.on('activate', function () {
     if (mainWindow === null) createWindow();
   });

5. 安装v8-compile-cache:

   npm install v8-compile-cache

6. 修改package.json文件：

   在package.json文件中，添加一个脚本用于生成快照。

   {
     "scripts": {
       "snapshot": "node snapshot.js"
     }
   }

7. 重新构建应用：

   先运行npm run snapshot生成快照，然后再构建Electron应用。

V8 Snapshots优化技巧：让你的Electron应用更快！

• 尽量减少主进程代码的体积： 主进程代码越少，生成的快照就越小，启动速度就越快。
• 避免使用动态代码： 动态代码会破坏V8 Snapshots的效果。
• 定期更新快照： 当你的代码发生变化时，需要重新生成快照。

AOT编译的局限性：并非万能药

AOT编译虽然有很多优点，但是也有一些局限性：

• 编译时间长： AOT编译需要花费更多的时间，尤其是在大型项目中。
• 二进制文件体积大： AOT编译会增加二进制文件的体积。
• 灵活性降低： AOT编译会降低代码的灵活性，因为代码在运行之前就已经确定了。

总结：AOT编译，用得好是神器，用不好是鸡肋

AOT编译是一种有效的提高JavaScript性能的技术，尤其是在React Native和Electron这种对性能要求较高的场景下。但是，AOT编译也有一些局限性，需要根据实际情况进行选择。

总的来说，AOT编译就像一把双刃剑，用得好是神器，用不好是鸡肋。希望通过今天的讲解，各位观众老爷们能够对AOT编译有一个更深入的了解，从而更好地应用它来提高自己的应用性能。

最后的建议：不要过度优化，适可而止

记住，优化是一件永无止境的事情。不要过度优化，适可而止。在追求性能的同时，也要考虑到代码的可维护性和开发效率。毕竟，代码是写给人看的，不是写给机器看的。

好了，今天的讲座就到这里，谢谢大家的收听！如果大家还有什么问题，欢迎随时提问。咱们下期再见！