webpack:代码分离
作者：
秒速五厘米
文章简介：
代码分离的好处：能够把代码分离到不同的 bundle 中，然后可以按需加载或并行加载这些文件。代码分离可以用于获取更小的 bundle，以及控制资源加载优先级，如果使用合理，会极大影响加载时间
代码分离的好处：能够把代码分离到不同的 bundle 中，然后可以按需加载或并行加载这些文件。代码分离可以用于获取更小的 bundle，以及控制资源加载优先级，如果使用合理，会极大影响加载时间。
1.entry分离
在webpack.config.js配置entry的属性
每个属性都是一个 入口chunk
每个chunk的所有相关模块打包成一个bundle输出文件
entry:{
xxx(入口chunk1):'模块文件', //bundle输出文件1
xxx(入口chunk2):['模块文件1','模块文件2',....], //bundle输出文件2
}
2.entry中重复模块分离
在webpack.config.js配置optimization.splitChunk属性
将entry中多个入口chunk中重复的模块去除,并分离出来一个单独的非入口chunk打包成一个bundle输出文件
optimization:{
splitChunk:{
chunks:'all'
}
}
3.ES6的模块方法：import()
调用
import(),作为一个非入口的chunk,将所有相关模块打包成一个单独的bundle输出文件,从而在运行时动态地加载 ES6 模块
链接：https://www.jianshu.com/p/5e09c77da4d3