webpack 与 code splitting

code splitting 即代码分割。那么什么是代码分割。

我们举个例子。

我们先下载一个包lodash，使用命令 npm install lodash --save 。lodash 是一个功能集合，提供了很多功能方法。

先在src 目录下 index.js 中写下面的代码，如下是index.js 中的内容。

import _ from 'lodash';

console.log(_.join(["a","b","c"]));

然后，打包 npm run bundle 。

打包好后，我们可以去浏览器运行一下html .是可以的。

我们可以打开代码 打包的 main.js 。我们将业务代码与工具库代码都打包进来main.js  中了，因此这个文件特别的大。【浏览器是可以并行加载文件的，同时加载两个中文件一般来说比加载一个大文件是要快的】

当我们业务代码特别多，工具库的代码当然也是很多的时候。

会有几个问题：

- 打包文件会很大，加载时间会很长

-如果用户重新访问页面，又要加载一个很大的文件（业务逻辑代码会变，工具库很少变）

那么我们可以这样解决：首先将index.js 中关于lodash 的引入放在另一个文件中，src下新建一个文件 lodash.js，代码如下。

import _ from 'lodash';

window._ = _;

然后，我们再做一个页面的配置。打开webpack.common.js

新增一个入口文件如下。

module.exports = {
	entry: {
		lodash: "./src/lodash.js",
		main: "./src/index.js"
	},
...
}

保存，然后打包 npm run bundle 。打包完成后就可以使用了。此时会发现，逻辑代码与lodash 代码被打包进了两个文件里，html 里引入了这两个文件。