Open lbwa opened 6 years ago
webpack
与 rollup
打包组件的差异:
webpack
所构建的结果包含 runtime
(亦可称为 manifest
,即用于协调各个 chunk
之间运行的代码),即包含引导 chunk
加载的代码。webpack 侧重于综合性(多资源,不仅限于 JS)打包,即应用打包,他构建了一系列应用的 chunk
之间的加载最优解。
rollup
仅包含入口的源代码及其相关依赖模块,他与 webpack
所打包的侧重点是不同的,rollup
侧重整体功能模块的打包,即类库打包。那么 rollup
就没有类似 webpack
的 runtime
来引导 chunk
,因为他将所有的源代码模块整合压缩于一个包内,包内也仅仅包含入口源代码及其相关依赖模块。rollup
的侧重点就是整合压缩源代码,他并不做代码分割等相关事情。rollup
正因为不包含 runtime
的引导 chunk
的额外代码,这对于类库打包来说也是极好的事情,因为正好可以极限地压缩类库代码。
webpack chunk optimization
Chunk loading
Chunk 优化原理
如果两个
chunk
包含相同的modules
,那么这些相同的modules
将会合并为一个。这种情况下可能导致chunks
有多个parents
。如果一个
chunk
的所有parents
都有一个相同的modules
,那么该modules
将被从该chunk
中移除。如果一个
chunk
包含所有其他chunk
的所有模块,那么该chunk
将被存储,因为该chunk
能适用于多个chunk
。Chunk types
包含一串
runtime
(即运行时)的modules
,如果chunk
包含module 0
那么 runtime 会立即执行该chunk
。如果不是,那么等待包含module 0
的chunk
执行完成之后再执行该chunk
(每次打包都会生成一个包含module 0
的chunk
)。一个正常不包含
runtime
的chunk
。该chunk
的结构依赖于chunk
的加载算法。一个初始
chunk
也是一个normal chunk
。不同之处在于初始chunk
的优化是非常重要的,因为他被计算在初始加载时间内(如,入口chunk
)webpack 默认启用优化情形
应该分离
modules
的情形可查看官方示例optimization.runtimeChunk
official site
即分离仅包含
runtime
的代码块,形成单独的一个 chunk,命名为runtime chunk
,它与应用源代码是引用关系。那么可利用该特点进行浏览器常缓存。在应用源代码发生改变时,其
contentHash
发生变化,但是此时的runtime chunk
因与源代码非包含关系,那么runtime chunk
内容没有发生变化,也就不会影响runtime chunk
的浏览器常缓存。一般
runtime chunk
其中是webpack
对其各个chunk
的引用机制,它用于处理不同的chunk
的执行关系,即它是直接与webpack
相关的代码,而与业务源代码无关的代码。optimization.runtimeChunk
默认为false
。那么每一个entry chunk
都将包含runtime
。optimization.splitChunks
webpack
默认优化配置如下: