浅谈webpack SplitChunksPlugin实用指南

Webpack 是一个广泛使用的前端资源模块打包工具，它允许开发者将应用程序分解为小的模块，然后进行高效的合并和优化。在Webpack 4中，为了更好地优化代码分隔和提高性能，`CommonsChunkPlugin` 被移除，取而代之的是 `optimization.splitChunks` 配置选项。本文将深入探讨 `SplitChunksPlugin` 的实用指南。 默认情况下，Webpack 会根据以下条件自动进行代码块分割： 1. 新代码块可以被多个模块共享。 2. 新代码块来自 `node_modules` 文件夹。 3. 新代码块大小超过30kb（min+gziped之前）。 4. 对于按需加载的代码块，最多并行请求5个。 5. 对于初始加载的代码块，最多并行请求3个。 举几个例子来说明默认行为： - **同步引入模块**：当所有模块都是同步引入时，如 `indexA.js` 中的情况，Webpack 会将所有内容打包到一起，不会进行代码分割。 - **动态导入模块**：如果存在动态导入，如 `import(/* webpackChunkName: "async-jquery" */ 'jquery')`，Webpack 将识别这种语法，并将动态导入的模块（本例中的 `jquery`）单独打包。 - **按需加载模块**：通过React Router等库实现按需加载，Webpack 会将这些模块打包到单独的chunk中，以减少初始加载时的体积。 接下来，我们将详细讨论 `SplitChunksPlugin` 的配置项： ```javascript module.exports = { //... optimization: { splitChunks: { chunks: 'async', minSize: 30000, minChunks: 1, maxAsyncRequests: 5, maxInitialRequests: 3, automaticNameDelimiter: '~', name: true, cacheGroups: {} } } } ``` - `chunks`: 指定需要优化的chunk类型，可选值包括 'initial', 'async', 'all'，默认为 'async'，意味着只优化按需加载的chunk。 - `minSize`: 设置最小合并块大小，默认为30000字节（30kb）。 - `minChunks`: 一个模块至少被引用多少次才会被提取到新的chunk中，默认为1。 - `maxAsyncRequests` 和 `maxInitialRequests`: 分别限制了按需加载和初始加载时的最大并行请求数。 - `automaticNameDelimiter`: 自动命名chunk时用作分隔符。 - `name`: 是否开启自动命名chunk，设置为 `true` 表示开启。 - `cacheGroups`: 这是一个非常重要的配置，用于定义自定义的缓存组策略，比如基于模块大小、模块出现次数等标准来决定如何分割代码块。 通过调整 `cacheGroups`，你可以进一步定制代码分割策略，例如优先提取第三方库，或者针对特定模块创建单独的chunk。例如： ```javascript cacheGroups: { vendors: { test: /[\\/]node_modules[\\/]/, priority: -10, filename: 'vendors.js' }, default: { minChunks: 2, priority: -20, reuseExistingChunk: true, filename: 'common.js' } } ``` 这段配置会创建两个缓存组：`vendors` 用于提取所有 `node_modules` 中的模块到单独的 `vendors.js` 文件，而 `default` 则会把至少被引用两次的模块打包到 `common.js`。 Webpack 的 `SplitChunksPlugin` 提供了强大的代码分割功能，可以根据项目需求进行细致的优化，减少页面加载时间，提高用户体验。理解并灵活运用这些配置，能够帮助开发者在前端性能优化方面取得显著效果。