如何缩减React Native项目中App Clip的体积？

你遇到的这个问题太常见了——主项目堆了一堆依赖，结果App Clip被迫“负重前行”，尤其是main.jsbundle占了大头。别担心，完全可以给主App和App Clip配置独立的依赖体系和打包流程，从根源上把主项目的冗余依赖挡在App Clip外面。

• 给App Clip建独立的专属工作区
  在项目根目录新建一个app-clip文件夹，里面单独放一个package.json，只装App Clip绝对必需的依赖——比如只保留react、react-native核心包，再加你App Clip功能真正要用的极简库（比如如果只是展示个页面，连状态管理库都可以不用）。这个package.json和主项目的完全隔离，主项目的那些heavy依赖（比如庞大的UI组件库、复杂的第三方SDK）一概不在这里出现。

• 配置Metro打包工具，区分两个打包目标
  你需要修改metro.config.js，让它能根据打包目标加载不同的入口和依赖。比如用环境变量来切换：

  1. 打包App Clip前，先设置环境变量：export TARGET=app-clip（Mac/Linux）或者set TARGET=app-clip（Windows）
  2. 在metro.config.js里根据process.env.TARGET来调整配置：

     const path = require('path');
     const target = process.env.TARGET || 'main';
     
     module.exports = {
       projectRoot: target === 'app-clip' ? path.join(__dirname, 'app-clip') : __dirname,
       entryFile: target === 'app-clip' ? './index.js' : './index.js', // 各自的入口文件
       resolver: {
         nodeModulesPaths: target === 'app-clip' 
           ? [path.join(__dirname, 'app-clip/node_modules')] 
           : [path.join(__dirname, 'node_modules')],
       },
       // 其他必要的metro配置...
     };
     

  这样打包时，Metro就只会处理App Clip目录下的依赖和入口，完全不会碰主项目的代码。

• 调整Xcode和Podfile，确保Native依赖也隔离
  你已经开始在Podfile里配置App Clip的target了，再细化一下：给App Clip的target单独指定依赖的native pods，只引入它需要的部分。比如：

  target 'MyAppClip' do
    use_frameworks!
    use_modular_headers!
  
    # 只引入App Clip需要的React Native核心pods
    pod 'React-Core', :path => '../app-clip/node_modules/react-native'
    pod 'React-RCTAppDelegate', :path => '../app-clip/node_modules/react-native/Libraries/AppDelegate'
    # 其他必要的基础pods，比如React-RCTImage如果用到的话
    # 绝对不要引入主项目的那些第三方SDK的pods
  end
  

  然后在Xcode里，把App Clip的main.jsbundle指向你专门为它打包生成的文件，避免和主项目的bundle混淆。

• 给App Clip的JS Bundle做极致压缩
  打包App Clip的bundle时，一定要开启最严格的压缩和Tree Shaking：

  react-native bundle \
    --entry-file ./app-clip/index.js \
    --bundle-output ./ios/AppClip/main.jsbundle \
    --platform ios \
    --dev false \
    --minify true \
    --tree-shake true
  

  这个命令会生成最小化的bundle，把所有没用到的代码都“摇”掉，进一步缩小体积。

• 最后做一遍冗余检查
  打包完后，用Xcode的Build Phases检查App Clip的target有没有不小心引入主项目的资源或代码；也可以用react-native analyze-bundle工具分析App Clip的bundle，看看有没有意外混入的主项目依赖，及时清理。

内容来源于stack exchange