什么是 vendor 和 runtime chunk
在前端开发中, 我们往往需要使用第三方库或框架来提高开发效率, 比如说 React, Vue, jQuery 等。其中, vendor 是指我们所使用的这些第三方库或框架, 而 runtime chunk 则是指我们自己编写的代码及其依赖。Webpack 可以将这两部分代码分开打包, 这样就能够充分利用浏览器的缓存机制, 提升页面加载速度。
为什么要拆分 vendor 和 runtime chunk
在没有拆分 vendor 和 runtime chunk 时, 每次修改自己的代码都会导致 vendor 代码也重新打包。如果我们在开发阶段修改了自己的代码, 则每次都需要重新加载 vendor 代码, 这样会拖慢我们的开发速度。同时, 在生产环境中也会出现类似的问题, 如果我们在生产环境中修改了自己的代码, 则会导致 vendor 代码也重新打包, 而这些 vendor 代码往往比较大, 如果每次都需要加载, 将会浪费很多带宽和时间。因此, 在开发和生产环境中拆分 vendor 和 runtime chunk 就变得非常重要。
如何拆分 vendor 和 runtime chunk
方法一：使用 SplitChunks 插件
Webpack 提供了一个 splitChunks 插件来实现拆分 vendor 和 runtime chunk 的功能。可以在配置文件中配置 splitChunks 属性, 该属性包含了一系列参数, 可以根据不同的情况进行配置。
-- -------------------- ---- -------
-------------- - -
-----
------------- -
------------ -
------- ------
----- ---------
-
-
-其中, chunks 参数用来指定哪些模块需要被拆分, 可以是 all、async 和 initial。name 参数用于指定该 chunk 的名称, 如果没有指定, 则会自动生成一个唯一的名称。
使用 SplitChunks 插件的优点是它非常方便, 可以根据不同的情况进行配置。缺点是这种方式可能会出现冗余代码的情况, 比如某个模块既被打包到 vendor 中, 又被打包到 runtime chunk 中, 这样将会增加我们的代码大小。
方法二：使用动态导入语法
动态导入语法是指使用 import() 语法来动态加载模块。在使用动态导入语法的过程中, Webpack 会将代码分割成一个个 chunk, 这些 chunk 中的代码就可以按照我们的要求进行拆分。具体来说, 我们可以将第三方库或框架进行拆分, 然后使用动态导入语法来加载这些拆分出来的代码。
举个例子, 我们可以将 React 和 React-dom 进行拆分, 然后在需要使用 React 的地方使用动态导入语法来加载。这样就能够将 React 和 React-dom 的代码单独打包成一个 chunk, 在需要的时候才进行加载。这样既能够充分利用浏览器的缓存机制, 又能够减少我们的代码大小。
import('react').then(React => {
console.log(React)
})
import('react-dom').then(ReactDOM => {
console.log(ReactDOM)
})使用动态导入语法的优点是拆分得更加细致和精准, 缺点是代码编写起来比较麻烦, 需要进行额外的配置和处理。
总结
在前端开发中拆分 vendor 和 runtime chunk 是一个非常重要的问题, 它能够充分利用浏览器的缓存机制, 提升页面加载速度。在这篇文章中, 我们介绍了两种拆分方式：使用 SplitChunks 插件和使用动态导入语法。使用 SplitChunks 插件比较方便, 可以根据不同的情况进行配置; 使用动态导入语法则可以拆分得更加细致和精准, 但是编写起来比较麻烦。在实际开发中, 我们可以根据不同的情况选择不同的方式来进行拆分。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648ea99148841e9894d0c12e