使用打字稿动态导入代码拆分

Question

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

有一些 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插件所以这个例子是手动添加magic webpack注释：

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

谁能帮我理解：

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

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

Answer 1

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

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

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

Answer 2

答案是确保在我的 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 没有成功。

Answer 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>
);

使用打字稿动态导入代码拆分

code splitting with dynamic imports with typescript

reactjs

typescript

webpack

code-splitting