课时-02 代码分割.md

代码分割

如何使用 import('moduleA.js') 进行代码分割呢

index.js 代码

// moduleA.js
export default 'a'

// index.js
import('moduleA.js').then(res => {
  console.log(res)
})

我们执行一下 node index.js，发现报错了 umd/iife 两种模式不支持代码分割

Error: UMD and IIFE output formats are not supported for code-splitting builds.

我们修改 format 为 cjs｜es，再 node index.js

dist/index.js

'use strict';

Promise.resolve().then(function () { return require('./moduleA-aa7d7c15.js'); }).then(function (res) {
    console.log(res);
});

dist/moduleA-aa7d7c15.js

'use strict';

var moduleA = 'a';

exports.default = moduleA;

如果你不想要将代码分成两个文件的话，你也可以在 output 使用这个属性 inlineDynamicImports: true

dist/index.js

Promise.resolve().then(function () { return moduleA$1; }).then(function (res) {
    console.log(res);
});

/** @module ModuleA */
var moduleA = 'a';

var moduleA$1 = /*#__PURE__*/Object.freeze({
    __proto__: null,
    'default': moduleA
});

当前配置

const options = {
  input: path.join(process.cwd(), 'src', 'index.ts'),
  output: {
    name: 'app',
    dir: 'dist',
    inlineDynamicImports: true,
    format: 'es'
  }
}