（一）背景
在项目中我们通常会用到一些插件，比如 loadsh、element-ui、axios 等等，如果不进行任何操作的话，这些【插件】和【业务逻辑代码】会统一打包到一个js文件中（main.js）
index.js:
import { flatten } from './number'
var arr = [1, 2, [3, 4, [5, 6]]]
var result = flatten(arr)
console.log(result)number.js
const lodash = require('lodash')
export function flatten (arr) {
return lodash.flatten(arr)
}打包结果：
如果 插件 1kb，业务逻辑代码 1Kb，改动一次业务代码，重新打包一次，改动一次业务代码，重新打包一次，每次打包就会是 2KB，如果我们采用代码分割的方式，把插件打包到一个js中，业务逻辑代码打包到一个js中，每次改动业务逻辑代码，就会只打包业务逻辑 js，只有1Kb，节省打包的时间，这就是 代码分割的主要意思。
主要做法把lodash单独打包
webpack.config.js:
entry: {
main: './src/main.js',
lodash: './src/lodash.js'
},output: {
filename: '[name].[hash].js',
path: path.resolve(__dirname, 'dist')
}打包：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>webpack test</title>
</head>
<body>
<div id="app"></div>
<script src="main.381b139bf6332969bc3e.js"></script>
<script src="lodash.381b139bf6332969bc3e.js"></script>
</body>
</html>
index.html中引入了两个js文件
（二）使用webpack配置 code splitting
增加两行代码
optimization: {
usedExports: true,
// 代码分割
splitChunks: {
chunks: 'all'
}
},打包后：
index.html:
main.269e60289818f70af114.js：这个js主要就是业务逻辑代码
vendors~main.269e60289818f70af114.js：这个文件主要就是插件的js集合代码