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

Question

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

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

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

Answer 1

我认为代码分割是开箱即用的。这是我的文本组件：

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/