在webpack4中拆分区块的正确方法是使用SplitChunks插件。SplitChunks是webpack4中用于拆分代码块的插件,它可以将公共的模块提取出来,形成单独的代码块,从而实现代码的拆分和优化。
具体的配置方法如下:
const webpack = require('webpack');
module.exports = {
// ...
optimization: {
splitChunks: {
chunks: 'all',
},
},
};
chunks: 'all'
:表示拆分所有类型的代码块,包括同步和异步代码块。minSize: 0
:表示拆分的代码块的最小大小,默认为30KB。minChunks: 1
:表示一个模块至少被引用的次数才会被拆分,默认为1。maxAsyncRequests: 5
:表示按需加载的代码块最大并行请求数,默认为5。maxInitialRequests: 3
:表示初始加载的代码块最大并行请求数,默认为3。automaticNameDelimiter: '~'
:表示生成的拆分代码块的文件名的连接符,默认为~
。name: true
:表示根据模块和缓存组生成文件名,默认为true。在代码中使用import()
或require.ensure()
动态导入模块时,webpack会自动根据配置的参数拆分代码块。
例如,假设有两个模块A和B,它们都引用了一个公共模块C。通过配置SplitChunks插件,可以将公共模块C提取出来形成一个单独的代码块。
import(/* webpackChunkName: "common" */ './common').then((module) => {
// 使用模块C
});
以上是在webpack4中拆分区块的正确方法及相关腾讯云产品的介绍。
云+社区技术沙龙[第4期]
高校公开课
链上产业系列活动
企业创新在线学堂
企业创新在线学堂
企业创新在线学堂
云+社区技术沙龙[第11期]
领取专属 10元无门槛券
手把手带您无忧上云