Как разделить код на Expo Web (React Native Web)? - PullRequest
Новая
       69

Как разделить код на Expo Web (React Native Web)?

4 голосов
/ 30 апреля 2020

Есть ли рекомендуемый подход для разделения кода в веб-проектах Expo?

Я не могу найти что-либо в документации, даже на веб-странице производительности: https://docs.expo.io/guides/web-performance/

Я удивлен, так как многие веб-приложения (возможно, большинство) собирается хотеть сделать. Если это официально не поддерживается, есть ли обходной путь?

Ответы [ 2 ]

0 голосов
/ 09 мая 2020

Я думаю, что разделение кода поддерживается из коробки. Вот мой текстовый компонент: 

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

Для более взвешенного решения вы можете использовать Next JS с Expo: https://docs.expo.io/guides/using-nextjs/

0 голосов
/ 06 мая 2020

С @ expo / webpack-config, упомянутым в разделе Presets , он должен.

Согласно этому фрагменту в аддоне оптимизации он должен поддерживать SplitChunk и согласно конфигурации выходов он должен поддерживать Dynami c импорт в режиме production.

Например: building basi c Пример проекта 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

Построение после применения динамического c импорта будет производить что-то вроде: 

  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

Это не выглядит оптимально, но мне кажется, что это разделение кода, как есть.

...