webpack和typescript中的异步代码拆分

Question

在webpack 2.2中,可以使用import().then()(https://webpack.js.org/guides/code-splitting-async/)使用异步代码拆分.我无法使用typescript .我有编译错误.我如何解决它？

Answer 1

异步代码拆分(或延迟加载)由TC39(https://github.com/tc39/proposal-dynamic-import)定义为标准.

TypeScript 2.4现在支持异步代码拆分.这是一个名为动态导入表达式的功能.

import (/* webpackChunkName: "momentjs" */ "moment")
    .then((moment) => {
         // lazyModule has all of the proper types, autocomplete works,
         // type checking works, code references work \o/
         const time = moment().format();
         console.log(time);
     })
     .catch((err) => {
         console.log("Failed to load moment", err);
     });

考虑到你必须在tsconfig.json中使用"module":"esnext".请查看此帖子以获取更多信息:https://blog.josequinto.com/2017/06/29/dynamic-import-expressions-and-webpack-code-splitting-integration-with-typescript-2-4/

如果您使用TypeScript <2.4,则有一项已知的工作:

interface System {
  import<T> (module: string): Promise<T>
}

declare var System: System

import * as lazyModule from './lazy-loaded-file'

System.import<typeof lazyModule>('./lazy-loaded-file')
.then(lazyModule => {
  // lazyModule has all of the proper types, autocomplete works,
  // type checking works, code references work \o/
})
// the './lazy-loaded-file' static import is only used for its types so typescript deletes it
// result: type-checked code splitting with lazy loading 

从来源:https://gist.github.com/Kovensky/e2ceb3b9715c4e2ddba3ae36e9abfb05

我做了一个例子(webpack 2,React,TypeScript)使用该代码延迟加载库momentjs,你可以在这里找到:

https://github.com/jquintozamora/react-typescript-webpack2-cssModules-postCSS/blob/master/app/src/components/AsyncLoading/AsyncLoading.tsx#L47