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

Question

在世博会web项目中，有没有推荐的代码拆分方法？

我在文档中找不到任何东西，甚至在web性能页面上也找不到：https://docs.expo.io/guides/web-performance/

我很惊讶，因为这是很多(可能是大多数) web应用程序想要做的事情。如果它不是官方支持的，有解决方法吗？

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

对于一个更有主见的解决方案，你可以在Expo中使用NextJS：https://docs.expo.io/guides/using-nextjs/

Answer 2

使用@expo/webpack配置，在Presets一节中提到，它应该。

根据optimization addon中的这段代码，它应该支持SplitChunk，根据outputs configuration的说法，它应该支持production模式下的Dynamic imports。

例如:构建基本的expo示例项目“带有一些选项卡”将在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

它看起来并不是最优的，但在我看来这就是代码拆分。