Ответ 1

https://github.com/hinok/webpack2-react-router-code-splitting

Репозиторий содержит webpack2 + react-router v4 + реализованный code splitting с помощью динамического import() и загрузки внешних библиотек по требованию только один раз используя loadjs. В качестве примера он загружает Stripe.js для определенного маршрута.

В репозитории вы можете найти два способа сделать разбиение кода

• по конфигурации маршрута
• по компоненту

Это основано на официальной документации и техническом документе Webpack от Andrew Clark

• https://webpack.js.org/guides/lazy-load-react/
• https://gist.github.com/acdlite/a68433004f9d6b4cbc83b5cc3990c194

При подготовке этого репозитория я обнаружил, что @Chris хотел бы загрузить Stripe.js только для определенных маршрутов, размещенных на внешнем CDN. С тех пор я думал о том, как лучше использовать модули AMD и избегать утечки глобальных переменных, но это немного сложно, потому что каждый модуль AMD может иметь другую оболочку, говоря об обертке, что-то вроде:

(function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        define(['b'], function (b) {
            return (root.amdWebGlobal = factory(b));
        });
    } else {
        root.amdWebGlobal = factory(root.b);
    }
}(this, function (b) {
    return {};
}));

Я мог бы сказать, что UMD обертка является стандартным, но иногда люди предпочитают менее самоуверенные обертки или им просто все равно в других средах. Я упоминаю об этом, потому что в истории git вы можете найти commit под названием Amdify, что было более доказательством концепции того, как AMD env может быть смоделированы. Наконец, я решил удалить его, потому что он далек от идеала и не охватывает все случаи использования и края.

Я не мог найти никакой информации об интеграции внешних модулей AMD или с использованием модулей AMD каким-то образом с webpack. Напротив, я обнаружил, что он просто не работает.

@mc-zone вы можете загрузить модули AMD с помощью script.js. Но это не имеет ничего общего с webpack, это просто работает, потому что AMD была разработана для этого. Таким образом, вы не сможете использовать функции webpack внутри этих модулей AMD. webpack требует статического анализа времени сборки.

by @jhns см. в github

webpack не обрабатывает загрузку script. Для этого используйте отдельную библиотеку. я. е. https://github.com/ded/script.js/

by @sokra посмотреть на github

Если это невозможно, вы не должны требовать(), но загружаете его через script -loader, например script.js.

by @jhns см. в github

Связанные с этим проблемы в Github:

• https://github.com/webpack/webpack/issues/150
• https://github.com/webpack/webpack/issues/118
• https://github.com/webpack/webpack/issues/462
• https://github.com/webpack/webpack/issues/240
• https://github.com/webpack/webpack/issues/274
• https://github.com/webpack-contrib/script-loader/issues/7

Сегодня я нашел статью Джеймса Кале о среде о своем проекте react-loadable, которые выполняют почти то же самое, что и компонент LazilyLoad, но с обещанием, что

• он поддерживает рендеринг на стороне сервера с помощью динамического require()
• он с готовностью предварительно загружает компоненты при необходимости

Я настоятельно рекомендую проверить его.

Ответ 2

Если вы используете Webpack 2, вы используете import() в конфигурационном файле React Router

export default {
 component: App,
 childRoutes: [
   {
     path: '/',
     getComponent(location, cb) {
       import('external-library-here')
       .then(function(){
         return System.import('pages/Home');
       })
      .then(loadRoute(cb)).catch(errorLoading);
     }
   },
   {
     path: 'blog',
     getComponent(location, cb) {
       import('pages/Blog').then(loadRoute(cb)).catch(errorLoading);
     }
   },
   {
     path: 'about',
     getComponent(location, cb) {
       import('pages/About').then(loadRoute(cb)).catch(errorLoading);
     }
   },
 ]
};

Вы также можете использовать реквизиты getComponent или getComponents в компоненте Router для передачи модулей, которые вы хотите специально для этого маршрута.

Ответ 3

В этом вопросе есть несколько случаев, которые следует принять подробно.

Пусть начнется.

Наблюдения

• Вы должны переключить использование react-router из компонентов в объект PlainRoute, это даст вам больше гибкости, когда дело доходит до выполняет разделение кода, а также пропускает создание компонента <AsyncComponent>
• Я уверен, что у вас будет больше вложенных компонентов в вашем маршруте, так что, если вложенный компонент в маршруте credit-card нуждается в библиотеке?

Предложения

• Используйте свой компонент маршрута в качестве точки входа, поэтому он не станет огромной реализацией в одном компоненте
• Учитывая приведенное выше предложение, вы можете добавить туда индекс с вашими зависимостями в библиотеке и использовать их в этом маршруте (у вас вложенные компоненты)
• Вам не следует импортировать эти библиотеки в любую часть кода, иначе эта функция будет ломаться
• После того, как вы загрузили эти библиотеки, добавьте их в объект окна. и ваши вложенные компоненты смогут глобально обращаться к вашим библиотекам.

Это предложение, которое не было реализовано, но я пытаюсь принять вас в правильном направлении относительно вашего вопроса

В конце концов, это тот подход, который я предложил:

import App from 'components/App';

function errorLoading(err) {
  console.error('Dynamic page loading failed', err);
}

function loadRoute(cb) {
  return (module) => cb(null, module.default);
}

function injectLibraries(libraries) {
  Object.keys(libraries).forEach(key => {
    window[key] = libraries[key];
  });
}

export default {
  component: App,
  childRoutes: [
    {
      path: '/(index.html)',
      name: 'home',
      getComponent(location, cb) {
        const importModules = Promise.all([
          import('components/HomePage/'),
          import('components/HomePage/libraries'),
        ]);

        const renderRoute = loadRoute(cb);

        importModules.then(([component, libraries]) => {
          injectLibraries(libraries);
          renderRoute(component);
        });

        importModules.catch(errorLoading);
      },
    },
    {
      path: '/credit-card',
      name: 'credit-card',
      getComponent(nextState, cb) {
        const importModules = Promise.all([
          import('components/CreditCardPage/'),
          import('components/CreditCardPage/libraries'),
        ]);

        const renderRoute = loadRoute(cb);

        importModules.then(([component, libraries]) => {
          injectLibraries(libraries);
          renderRoute(component);
        });

        importModules.catch(errorLoading);
      },
    },
  ],
};

Файл ваших библиотек должен выглядеть так:

import stripe from 'stripe';

export default {
  stripe 
};

Ответ 4

Возможно, вы захотите изучить:

https://github.com/faceyspacey/webpack-flush-chunks

https://github.com/faceyspacey/require-universal-module

Последний представляет собой пакет общего назначения, предназначенный для создания модулей, которые нуждаются в BOTH синхронно и асинхронно, требуя других модулей.

Этот пакет - это то, что вы используете для очистки узлов Webpack, которые были определены как необходимые по запросу:

https://github.com/faceyspacey/webpack-flush-chunks

Это не относится к конкретному маршрутизатору, что, вероятно, означает, что он более прост и требует меньше обходных решений.