代码分离

代码分离是webpack重要功能之一。代码分离能将代码分离到不同的bundle中，以便实现按需加载或并行加载，合理使用可以极大地提高加载时间。

代码分离最常用的方法有两种

• 多个入口起点
• 动态导入

多个入口起点

设置多个入口起点是最简单的代码分离方式。

我们在根目录创建两个入口文件：index.js和 index2.js 。

在webpack中配置入口文件。

{
...
entry: {
		home: "./index.js",
		index: "./index2.js",
}

当有多个入口起点时，entry应当传递一个对象，对象属性的属性名就是模块的**[name]，值是文件路径。**

然后运行打包命令，可以看到dist目录生成了两个bundle文件。

- index.432c6c35b084f462ed70.bundle.js
- home.432c6c35b084f462ed70.bundle.js

多个入口起点虽然可以很方便地实现代码分离，但是也有一个很大的缺点，那就是会重复引入一些模块。

例如我们安装react，然后在两个入口文件中都引入react，打包后可以发现两个bundle文件都引用的react。

import "react"

解决重复引用的思路很简单，将重复引用的包打包成公共的bundle文件。

entry: {
		home: {
			import: "./index.js",
			dependOn: "share",
		},
		index: {
			import: "./index2.js",
			dependOn: "share",
		},
		share: "react",  // 公共模块
	},

如果我们要在一个 HTML 页面上使用多个入口时，还需设置 optimization.runtimeChunk: 'single' ，否则还会遇到这里所述的麻烦。