Expo Webプロジェクトのコード分割に推奨されるアプローチはありますか?
Webパフォーマンスページでも、ドキュメントに何も見つかりません: https://docs.expo.io/guides/web-performance/
多くの(おそらくほとんどの)Webアプリがやりたいと思っているので、私は驚いています。正式にサポートされていない場合、回避策はありますか?
私は、コード分割が標準でサポートされていると思います。これが私のテキストコンポーネントです:
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/
Presets セクションで説明されている@ expo/webpack-configを使用すると、そうする必要があります。
optimization addon のこのフラグメントによると、それは SplitChunk をサポートする必要があり、 outputs configuration によると Dynamic imports をサポートする必要がありますproduction
モード。
たとえば、「いくつかのタブを使用して」基本的なエキスポサンプルプロジェクトをビルドすると、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
あまり見た目は良くありませんが、これはそのままのコード分割のようです。