Webpack и React.lazy не разделяют динамический импорт. Почему?

Я, очевидно, очень запутался в этом, но у меня есть модуль FileAttachments, который импортирует (и никто другой) большое количество других значительных модулей. Я ожидаю, что когда я изменю этот импорт на динамический импорт с помощью React.lazy (React 18), тогда веб-пакет (5.72) разделит код, необходимый только для этого импорта, на свой собственный фрагмент. Но ничего подобного не сделал. Что я так запутался? Я установил только одну точку входа, но я думал, что смысл динамического импорта в том, что мне не нужно разбивать его таким образом.

Я изменил свой код на:

import {observer} from "mobx-react-lite"
import React, {useCallback, Suspense} from "react"
....
import {Box, Divider, Link, Typography} from "@mui/material"
// import FileAttachments from "Widgets/FileAttachments"
const FileAttachments = React.lazy(() => import("Widgets/FileAttachments"));

И правильно разместил использование внутри компонента Suspense.

   <Suspense fallback={<Box>Loading...</Box>}>
        <FileAttachments attachments={pub.manuscript} editable={true} />
    </Suspense>

Я пробовал это практически со всеми вариантами оптимизации веб-пакетов. Прямо сейчас они:

   optimization: {
    splitChunks: {
      chunks: 'all',
      maxInitialRequests: Infinity,
      minSize: 0,
      cacheGroups: {}
    },
    runtimeChunk: 'single',
    minimizer: [...   //Long list of optimizatons to Terser and CssMinimizer
          ],
    minimize: true
    }

Я также испробовал все предложения по удалению динамического импорта предложений из моей конфигурации Babel. В настоящее время для производства это выглядит следующим образом, но я попытался исключить динамический импорт предложения из предустановок и удалить синтаксический динамический импорт и все комбинации.

   presets: [
         '@babel/preset-env',
                {
                    targets: {
                        "browsers": ["last 1 Firefox versions", "last 1 FirefoxAndroid versions", "last 1 edge versions", "last 1 Chrome versions", "last 1 and_chr versions", "last 1 Safari versions", "last 1 ios_saf versions"],
                    },
                    forceAllTransforms: false,
                    useBuiltIns: 'entry',
                    corejs: '3.8',
                    modules: 'auto',
                    bugfixes: true,
                    exclude: ['transform-typeof-symbol'],
                }
            ],
        plugins: [
            ['@babel/plugin-proposal-class-properties', {loose: false}], //, { loose: true }],
            ['@babel/plugin-transform-runtime', {helpers: false}],
            ["@emotion", emotionOptions],
            [
                "babel-plugin-direct-import",
                {
                    "modules": [
                        "@mui/lab",
                        "@mui/system",
                        "@mui/material",
                        "@mui/icons-material"
                    ]
                }
            ],
            '@babel/preset-react',
                {
                    useBuiltIns: true
                }
          ]

Модуль возвращает экспорт по умолчанию? Можете ли вы показать больше конфигурации вашего веб-пакета, вывода сборки и кода модуля?

morganney 29.04.2022 15:48

Мне наконец-то удалось его отследить. Несмотря на то, что в итоге я написал это как SPA с бэкэндом json API, когда я начал, я использовал react-rails для монтирования корневого компонента, и оказалось, что код, который react-rails использует для монтирования компонентов, использует динамический оператор требует для загрузки компонентов из модулей, которые убили разделение кода. Извините, думаю, я не предоставил достаточно подробностей в конце концов.

Peter Gerdes 29.04.2022 20:34
3 метода стилизации элементов HTML
3 метода стилизации элементов HTML
Когда дело доходит до применения какого-либо стиля к нашему HTML, существует три подхода: встроенный, внутренний и внешний. Предпочтительным обычно...
Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Flatpickr: простой модуль календаря для вашего приложения на React
Flatpickr: простой модуль календаря для вашего приложения на React
Если вы ищете пакет для быстрой интеграции календаря с выбором даты в ваше приложения, то библиотека Flatpickr отлично справится с этой задачей....
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Что такое cURL в PHP? Встроенные функции и пример GET запроса
Что такое cURL в PHP? Встроенные функции и пример GET запроса
Клиент для URL-адресов, cURL, позволяет взаимодействовать с множеством различных серверов по множеству различных протоколов с синтаксисом URL.
3
2
79
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

На всякий случай, если кто-то еще столкнется с этой проблемой. Основная причина проблемы заключалась в том, что я использовал react-rails для монтирования своего корневого компонента реакции, и как только я просмотрел код, который он использует, я обнаружил, что он динамически требует кода из ваших модулей (пытается угадать, где находится ваш компонент по имени файла) и это, казалось, поставило веб-пакет в тупик.

Как только я вытащил этот код и просто создал/смонтировал свой корень вручную, все заработало нормально.

Другие вопросы по теме