举例

没有分块打包之前

src/index.js

import _  from 'lodash'
const arr = [1, 2, 3]
console.log(_.join(arr,'_'))

浏览器只请求1个体积大的js文件

缺点：
文件大，加载时间长；
业务代码修改后，重新访问页面，又要重新请求整个js，不能利用缓存；

分块打包

将公共模块与业务模块分开
src/lodash.js

import _ from 'lodash'
window._ = _;

src/index.js

const arr = [1, 2, 3]
console.log(_.join(arr,'_'))

webpack.common.js

    lodash: './src/lodash.js',
    main: './src/index.js'
  },

浏览器只请求2个体积小的js文件

优点：
打包文件被拆成2个小的js文件，加载快；
业务代码修改后，重新访问页面，只需要重新请求main.js，不用再请求lodash.js，可以利用缓存。

webpack实现代码分割的2种方式

以上纯手工的代码分割不太方便，webpack提供了2种代码分割的方法。

1、同步代码

在webpack.common.js里配置optimization

  optimization: {
    splitChunks: {//代码分割
      chunks: 'all'
    }
  }

打包时，会自动将index.js 分块成main.js（业务代码），和vendors~main.js公共代码）

浏览器请求2个体积小的js文件

1、异步代码(异步import)

异步import文件，需要用babel插件去转换这种语法
安装插件

babel-plugin-dynamic-import-webpack

src/index.js

function getComponent() {
  return import('lodash').then(() => {
    console.log('laall')
  })
}
getComponent();

打包时，会自动将index.js 分块成main.js（业务代码），和0.js(公共代码）

无需任何配置会自动进行代码分割,放到新的文件中。