提到前端打包工具,毫无疑问想先到的是webpack。但是前端发展地很快,时不时会有新东西出现,打包工具这边之前也出现包裹和汇总。各种工具的碰撞,相互汲取优点,促进技术的发展。
webpack4中支持了零配置的特性,同时对块打包也做了优化,<代码> CommonsChunkPlugin> 优化。splitChunks 代替。
下面就开始介绍splitChunks的内容。
首先webpack会根据下述条件自动进行代码块分割:
<李>新代码块可以被共享引用,或者这些模块都是来自node_modules文件夹里面李
<李>新代码块大于30 kb (min + gzip之前的体积)
<李>按需加载的代码块,并行请求最大数量应该小于或者等于5
<李>初始加载的代码块,并行请求最大数量应该小于或等于3
块打包默认情况下只会影响按需加载模块,因为对初始块也进行优化打包会影响HTML中的脚本标签数,增加请求数。
接下来看些例子来理解默认情况的打包。
<强>模块全部是同步引入 <人物>
//indexA.js
从“反应”进口的反应
从“react-dom”进口ReactDOM
从“lodash”进口_
console.log (_。加入([a, b], ' ~ '))
ReactDOM.render (
& lt; div> SplitChunk
. getelementbyid(根)
)
默认情况只会影响按需加载模块,所以所有内容全部被打包到一起了。
<强>有模块动态导入
这里首先使用符合ECMAScript提案的进口()语法<人物>
//indexA.js
从“反应”进口的反应
从“react-dom”进口ReactDOM
从“lodash”进口_
导入(/* webpackChunkName:“async-jquery”*/jquery)。然后(组件=比;{
console.log(组件)
})
console.log (_。加入([a, b], ' ~ '))
ReactDOM.render (
& lt; div> SplitChunk
. getelementbyid(根)
)
这里jquery使用动态导入,打包结果中可以看到jquery被单独打包了
<强>反应按需加载
同样的我们试要反应按需加载,使用react-router提供的按需加载方案
AsyncModule模块按上面方案异步加载仪表板
从“反应”进口的反应
从“react-dom”进口ReactDOM
从“react-router-dom”进口{BrowserRouter、路线}
从“进口AsyncModule。/AsyncModule.jsx '
从“lodash”进口_
从“jquery”进口美元
console.log (_。加入([a, b], ' ~ '))
ReactDOM.render (
& lt; div>
& lt; BrowserRouter>
& lt;路由路径=={AsyncModule}/'/'组件比;
& lt;/BrowserRouter>
& lt;/div>
. getelementbyid(根)
)
从打包结果可以看到按需加载的模块被打包到0. js去了。
讲完了webpack默认情况下对打包块的优化,接下来看splitChunks配置项。
相关配置项:
模块。出口={//?
优化:{
splitChunks: {
块:“异步”,
minSize: 30000,
minChunks: 1、
maxAsyncRequests: 5
maxInitialRequests: 3,
automaticNameDelimiter:“~”,
名称:没错,
cacheGroups: {}
}
}
}
<李>块:表示哪些代码需要优化,有三个可选值:初始(初始块),异步(按需加载块),所有(全部块),默认为异步李
<李> minSize:表示在压缩前的最小模块大小,默认为30000李
<李> minChunks:表示被引用次数,默认为1
<李> maxAsyncRequests:按需加载时候最大的并行请求数,默认为5
<李> maxInitialRequests:一个入口最大的并行请求数,默认为3
<李> automaticNameDelimiter:命名连接符
<李>名称:拆分出来块的名字,默认由块名和散列值自动生成李
<李> cacheGroups:缓存组。缓存组的属性除上面所有属性外,还有测试、优先级、reuseExistingChunk
