web-dev-qa-db-ja.com

Expo web（React Native Web）でコード分割する方法は？

Expo Webプロジェクトのコード分割に推奨されるアプローチはありますか？

Webパフォーマンスページでも、ドキュメントに何も見つかりません： https://docs.expo.io/guides/web-performance/

多くの（おそらくほとんどの）Webアプリがやりたいと思っているので、私は驚いています。正式にサポートされていない場合、回避策はありますか？

expocode-splittingreact-native-web
3
Evanss

私は、コード分割が標準でサポートされていると思います。これが私のテキストコンポーネントです：

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/

0
Evanss

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

あまり見た目は良くありませんが、これはそのままのコード分割のようです。

1
Kyr