使用打字稿进行动态导入的代码拆分答案

【问题标题】：code splitting with dynamic imports with typescript使用打字稿进行动态导入的代码拆分
【发布时间】：2019-08-06 07:34:55
【问题描述】：

我真的很难找到任何打字稿和代码拆分的好例子。

有一些 babel 插件涵盖了这一点，但对于 typescript 示例来说非常薄弱。

我正在使用 react，所以我想使用 React.Lazy，但我找不到任何涵盖 webpack 代码拆分方面的东西

我确实找到了这个old example，但它使用了现在已故的 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");
        }
      })
],

它使用react-loadable但显然不能使用babel插件所以示例是手动添加魔术webpack cmets：

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

谁能帮我理解：

如何在 webpack 方面为动态导入设置代码分割：
我可以将 React.Lazy 与 typescript 一起使用吗？

我想我需要确保 ts 没有删除 cmets。

【问题讨论】：

我在 Typescript 项目中使用了React.lazy。效果很好！
你能给我举一个如何设置 webpack 的例子吗？知道你能做到只会让我更加嫉妒:)
我并不完全熟悉配置 webpack 以进行动态导入 - 我认为这是开箱即用的支持。快速浏览他们的文档似乎可以证实这一点：webpack.js.org/guides/code-splitting/#dynamic-imports 你是否尝试过仅使用React.lazy 和动态导入，例如：const Component = React.lazy(() => import('./Component')); 假设你的 React 版本是 16.6 +

标签： reactjs typescript webpack code-splitting

【解决方案1】：

答案是确保在我的 tsconfig.json 中设置这些值：

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

然后我需要在任何惰性导入中添加神奇的 webpack 注释，如果你使用 babel 和 typescript，也许你不需要这样做：

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

这仅适用于 webpack 4.28.4。 4.29.x 无效。

【讨论】：

它对我不起作用stackoverflow.com/questions/60056219/…

【解决方案2】：

第 2 版以上的 webpack 支持开箱即用的动态导入工作。

如果您真的有兴趣查看一些示例，请尝试使用此命令安装支持 typescript 的 CRA。 npx create-react-app my-app --typescript.

然后浏览到 node_module 并打开 react-sctipts 包并浏览到 config 文件夹，在那里您可以找到用于开发和生产的 webpack 配置。

【讨论】：

【解决方案3】：

将create-react-app 与 Typescript 一起使用，无需进行任何设置。您可以从docs 中获取示例。例如

import React, { Suspense, lazy } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

const Home = lazy(() => import('./routes/Home'));
const About = lazy(() => import('./routes/About'));

const App = () => (
  <Router>
    <Suspense fallback={<div>Loading...</div>}>
      <Switch>
        <Route exact path="/" component={Home}/>
        <Route path="/about" component={About}/>
      </Switch>
    </Suspense>
  </Router>
);

【讨论】：