使用 Typescript 进行 Webpack 延迟加载

Question

我遇到了延迟加载和 webpack 的问题。

Sean Larkin 的视频展示了使用 webpack 4 创建延迟加载包是多么容易（Here）。但是当我尝试用打字稿来做这件事时，我遇到了一些问题。

index.ts

export const someThing = something => import("./lazy/lazy");

和

lazy/lazy.ts
export default "I am lazy";

当我在没有任何 webpack 配置的情况下运行它并将文件命名为“.js”时，我会得到一个主块和一个用于延迟加载模块的小块。

但是当我使用简单的 webpack 配置将它作为“.ts”文件运行时，我只得到“main.js”文件，没有额外的块。

webpack.config.js
let config = {
    resolve: {
        extensions: [".ts", ".js"]
    },
    module: {
        rules: [
            { test: /\.ts$/, use: ["ts-loader"], exclude: /node_modules/ },
        ]
    },
}

module.exports = config;

和

tsconfig.json
{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es5",
        "noImplicitAny": false,
        "sourceMap": true,
        "lib": [ "es6", "dom" ],
        "removeComments": true
    }
}

有什么需要配置的吗？ 将“js”文件导入“ts”文件到底有什么区别？

Answer 1

无法将 Typescript 编译器配置为不触及某些导入。 延迟加载的old way 也同样有效：

require.ensure([], require => {
  const lodash = require('lodash') as typeof import('lodash');
}, 'lodash-chunk');

这可以封装在一个承诺中，以实现与 ES6 import 非常相似的行为

function importLodash(): Promise<typeof import('lodash')> {
    return new Promise((resolve, reject) => {
        require.ensure([], require => {
            resolve(require('lodash'))
        }, reject, 'lodash-chunk');
    })
}

// then use it

const lodash = await importLodash();

*note-require.ensure 不是通用的 - 对于您想要延迟加载的每个模块，都需要复制此函数。

您还需要根据启用的库声明require.ensure 接口。我在我的自定义类型文件中使用它

/* typings.d.ts */

declare global {
    const require: {
        // declare webpack's lazy loading interface
        ensure(deps: string[], cb: (lazyRequire: (path: string) => any) => void, chunkName: string): void;
        ensure(deps: string[], cb: (lazyRequire: (path: string) => any) => void, errCb: (err: Error) => void, chunkName: string): void;
    };
}

Answer 2

我有一个技巧可以延迟加载具有其类型的模块：

function lazyLoad(){ return let lazyModule:typeof import('xxx') = require('xxx'); }

限制：xxx只能是字符串，不能是变量。

Answer 3

Dynamic imports are an ES feature，您需要告诉 TypeScript 转换为 ESNext 以在输出中获取 import，只需将 "module": "commonjs" 更改为 "module": "esnext"。

获取此代码：

export const LoadMe = () => import('./a-module')

• "module": "commonjs" 编译为 module.exports.LoadMe = () => require('a-module')，Webpack 无法知道它是动态的还是普通的 require
• "module": "esnext" 编译为 export const LoadMe = () => import('a-module')，Webpack 知道它是动态的，因为它是对 import 的调用表达式