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

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

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

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

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

Answer 1

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

如果您真的有兴趣看一些示例尝试使用此命令安装带有typescript支持的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没有工作。