Question

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

有一些babel插件可以解决这个问题，但是对于打字稿示例来说实在是太薄弱了。

我正在使用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注释：

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

任何人都可以帮助我理解：

如何在Webpack方面设置动态导入的代码拆分：
我可以将React.Lazy与打字稿一起使用吗？

我认为我需要确保ts不会删除评论。

Answer 1

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

如果您真的希望看到一些示例，请尝试使用此命令安装具有打字稿支持的CRA。 npx create-react-app my-app --typescript。

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

Answer 2

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

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

然后我需要将魔术性的webpack注释添加到任何懒惰的导入中，如果您正在使用babel和打字稿，也许您不需要这样做：

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

使用typescript动态导入进行代码拆分

3 个答案: