如何使用 Expo web (React Native Web) 进行代码拆分？

Question

是否有推荐的 Expo Web 项目中的代码拆分方法？

我在文档中找不到任何内容，即使在网络性能页面上也是如此：https://docs.expo.io/guides/web-performance/

我很惊讶，因为很多（可能是大多数）网络应用程序都想做这件事。如果官方不支持，是否有解决方法？

Answer 1

用@expo/webpack-config，在Presets部分提到，应该。

根据 optimization addon it should supports SplitChunk, and according to outputs configuration it should supports Dynamic imports 中 production 模式中的此片段。

例如：构建基本的 expo 示例项目 "with some tabs" 将在 web-build/static/js 中生成，如下所示：

  736330 2.d0bdb3b4.chunk.js         // vendors modules  
    7979 app.cdd6a824.chunk.js       // application
    1540 runtime~app.34c76111.js     // runtime chunk

应用动态导入后构建将产生如下内容：

  563269 2.dfc93353.chunk.js
  173256 3.3b8c575c.chunk.js
    5837 4.0ec37ce1.chunk.js
    2574 app.82916626.chunk.js
    2354 runtime~app.bd407466.js

看起来不是很理想，但在我看来这就是代码拆分。

Answer 2

我认为开箱即用地支持代码拆分。这是我的文本组件：

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Component from './component'

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>
      <Component />
    </View>
  );
}

在 static/js/

中生成此捆绑包

2.1a79eeb8.chunk.js       198 KB
app.95f72b23.chunk.js     936 bytes
runtime~app.34c76111.js   2 KB

如果我从这里更改我的组件导入：

import Component from './component'

要使用React.lazy:

const Component = React.lazy(() => import('./component'));

那么生成的包是这样的：

2.025243cb.chunk.js       198 KB
3.6601a067.chunk.js       326 bytes
app.70989548.chunk.js     859 bytes
runtime~app.4aba9b3a.js   2 KB

对于更自以为是的解决方案，您可以将 NextJS 与 Expo 一起使用：https://docs.expo.io/guides/using-nextjs/

如何使用 Expo web (React Native Web) 进行代码拆分？

How to code split with Expo web (React Native Web)?

expo

code-splitting

react-native-web