观察下面的代码:
//index.js
import _ from 'lodash';//大小为1mb
console.log(_.join(['a', 'b', 'c'],'-'))//这一行的大小为1mb
我们假设lodash包的大小为1mb,index.js中的console.log(_.join(['a', 'b', 'c'],'-'))
也需要1mb的大小。这样打包之后,我们发现:
- 打包后生成的
main.js
文件较大(2mb左右),加载时间会很长; - 一般情况下,我们不会更改lodash包中的内容,但是index.js中的代码我们可能会随着业务需求的改变而修改,所以当我们改变了index.js 的内容之后,用户需要重新加载一次main.js,响应时间较长,浪费了网络资源。
有没有方法能够使lodash和业务代码分开打包呢?
这其实就是代码分割!
手写代码分割:
我们新建一个lodash.js
import _ from 'lodash';
window._ = _
在lodash.js文件中单独引入lodash,并将lodash挂载到window上面。
修改index.js:
console.log(_.join(['a', 'b', 'c'],'-'))
然后修改webpack.config.js:
...
entry: {
lodash: './src/js/lodash.js',//添加新的入口文件,并且lodash.js应该在main的上面
main