webpack 异步引入的文件如何根据文件大小判断是否单独打包在一起？-灵析社区

在`Webpack`中，异步引入的文件默认情况下会根据模块的依赖关系和配置进行打包。如果你希望根据文件大小来决定是否将多个小文件合并在一起打包，你可以通过配置`optimization.splitChunks`选项来实现这个需求。 `optimization.splitChunks`是`Webpack 4`中引入的一个特性，它允许你自定义代码分割的策略。你可以设置一个最小文件大小`（minSize）`和最大文件大小`（maxSize）`，以及一个合并文件的阈值`（maxAsyncRequests）`，来控制何时将多个小文件合并成一个`chunk`。 以下是一个配置示例，展示了如何根据文件大小来合并`chunk`： module.exports = { // ... optimization: { splitChunks: { chunks: 'all', minSize: 30000, // 设置最小文件大小为30KB maxSize: 0, // 设置最大文件大小，0表示不限制 minChunks: 1, // 设置最小chunks数量，1表示每个chunk至少包含一个模块 maxAsyncRequests: 10, // 设置并发请求的最大数量 maxInitialRequests: 5, // 设置初始并发请求的最大数量 automaticNameDelimiter: '~', // 自动生成的chunk名称分隔符 name: true, // 自动生成chunk名称 cacheGroups: { vendors: { test: /[\\/]node_modules[\\/]/, priority: -10, // 缓存组优先级 filename: 'vendors.js' }, default: { minChunks: 2, priority: -20, reuseExistingChunk: true, // 如果当前 chunk 包含已从主 bundle 中拆分出的模块，则它将被重用，而不是生成新的模块 filename: 'common.js' } } } } }; 在这个配置中，`minSize`设置为`30KB`，这意味着如果一个`chunk`的大小小于`30KB`，`Webpack`会尝试将其与其他`chunk`合并。`maxSize`设置为`0`，表示没有最大文件大小限制。`maxAsyncRequests`和`maxInitialRequests`分别控制并发请求和初始请求的最大数量。