代码分离

1、splitChunks

使用SplitChunksPlugin 插件可以将公共的依赖模块提取到已有的 entry chunk 中，或者提取到一个新生成的 chunk。

optimization: {
    splitChunks: {
      chunks: "all"
    }
 }

2、动态导入

btn.onclick = e => import(/* webpackChunkName: "print" */ "./print").then(module => {
        var print = module.default;
        print();
 })

推荐使用import() 实现动态引入。

使用动态引入时，不需要在entry设置bundle入口，在output中设置chunkFilename，它决定了非入口chunk名称。

output: {
	chunkFilename: '[name].lazybundle.js',
}

我们在import中使用了注释，注释中提供了webpackChunkName,这样会拆分出来命名为print.lazybundle.js的bundle。import() 会返回一个promise，所以需要.then()进行后续操作。这里也可使使用async、await来实现同步效果。

当调用import()方法引用模块时，必须指向模块的.default值，因为它才是promise被处理后返回的实际的module对象。

3、预取、预加载模块(prefetch、preload)

预取(prefetch)：表示用户在接下来的浏览中可能会用到对应的资源，提示浏览器在空闲的时候获取对应资源。获取资源后不解析。

会生成以下代码并追加到头部，告诉浏览器在闲置时间加载...bundle.js

<link rel="prefetch" href="...bundle.js" />

预加载(preload): 下载资源后解析文件。

预取与预加载区别

4、懒加载

将后续执行的代码从源代码中分离出来，在需要触发时再引入执行。具体见上述动态引入的例子。