разделение кода с помощью динамического импорта с помощью машинописи

Question

Я действительно изо всех сил пытаюсь найти какие-нибудь хорошие примеры для машинописного текста и разделения кода.

Существуют плагины babel, которые покрывают это, но очень тонкие на местах для примеров машинописного текста.

Я используюреагировать, поэтому я хотел бы использовать React.Lazy, но я не могу найти ничего, что покрывает сторону разделения кода веб-пакета

Я нашел этот старый пример , но он использует ныне покойный CommonsChunkPlugin:

plugins: [
    new webpack.optimize.CommonsChunkPlugin({
        name: "vendor",
        minChunks: function (module) {
          // this assumes your vendor imports exist in the node_modules directory
          return module.context && module.context.includes("node_modules");
        }
      })
],

Он использует реагирующе-загружаемый , но, очевидно, не может использовать плагин babel, поэтому в примере вручную добавляются комментарии к магическому веб-пакету:

export const LoadableHello = Loadable({
    loader: () => import(/* webpackChunkName: "hello" */ "./Hello"),
    loading: () => <div>loading ...</div>
});

Может кто-нибудь помочья понимаю:

1. Как настроить разделение кодов для динамического импорта на стороне веб-пакета вещей:
2. Можно ли использовать React.Lazy с машинописью?

Я думаю, мне нужно убедиться, что ts не удаляет комментарии.

Answer 1

Ответ состоял в том, чтобы убедиться, что эти значения были установлены в моем tsconfig.json:

"compilerOptions": {
    "jsx": "react",
    "lib": ["es5", "es2015", "es2016", "dom", "es2015.promise"],
    "module": "esnext",
    "moduleResolution": "node"
  },

Затем мне нужно добавить волшебный комментарий к веб-пакету для любого отложенного импорта, возможно, вам не нужно делать это, если вы используете babel и машинопись:

const TreeContainer = React.lazy(() =>
  import(/*
  webpackChunkName: "tree-container",
  webpackPrefetch: true
*/ '../TreeContainer')
);

Это работало только на веб-пакете 4.28.4. 4.29.x не работает.

Answer 2

webpack выше версии 2 поддерживает динамический импорт работает из коробки.

Если вы действительно хотите увидеть какой-нибудь пример, попробуйте установить CRA с поддержкой машинописи с помощью этой команды.npx create-react-app my-app --typescript.

, затем перейдите к node_module, откройте пакет react-sctipts и перейдите к папке конфигурации, где вы можете найти конфигурацию веб-пакета для разработки и производства.