下面是“详解webpack4之splitchunksPlugin代码包分拆”的完整攻略：
1. splitchunksPlugin是什么
SplitchunksPlugin是webpack4中的一个插件，用于将代码块分离成不同的文件，以实现优化性能和减小代码体积的目的。
2. 配置示例
让我们在webpack.config.js文件中创建一个新的optimization对象并为其添加splitChunks选项。它的最小配置如下：
module.exports = {
// ...
optimization: {
splitChunks: {
chunks: 'async',
},
},
};
在上面的示例代码中，我们仅仅指定了chunks选项，这指定了webpack只在异步加载时分离代码块，这是唯一的条件。实际上，这个示例并不会生成额外的chunk。
我们还可以添加其他的选项来进一步调整splitChunks行为以及生成的代码块数量。比如，我们可以指定minSize选项以限制允许分割的最小文件大小。我们还可以设置maxSize选项以指定允许的最大文件大小。
下面是一个更完整的splitChunks示例：
module.exports = {
// ...
optimization: {
splitChunks: {
chunks: 'async',
minSize: 30000,
maxSize: 0,
minChunks: 1,
maxAsyncRequests: 5,
maxInitialRequests: 3,
automaticNameDelimiter: '~',
name: true,
cacheGroups: {
vendors: {
test: /[\\/]node_modules[\\/]/,
priority: -10,
},
default: {
minChunks: 2,
priority: -20,
reuseExistingChunk: true,
}
}
},
},
};
3. 示例说明
示例1：基本示例
我们首先来看一个简单的示例：
<!DOCTYPE html>
<html>
<head>
<title>SplitChunksPlugin示例1</title>
<script src="app.js"></script>
<script src="vendor.js"></script>
</head>
<body>
<!-- 页面内容 -->
</body>
</html>
在上述示例中，我们已经通过script标签在页面上嵌入了两个JavaScript文件：
app.js包含我们自己的代码vendor.js包含所有第三方库和框架
这个示例很简单，但是我们可以使用webpack的splitChunks插件将这两个JavaScript文件分开来。
我们可以在webpack.config.js中使用以下代码：
module.exports = {
// ...
optimization: {
splitChunks: {
chunks: 'all'
}
}
};
这个示例中，我们指定了all选项，这意味着webpack将尝试将所有公共模块分离出来并创建新的chunk。我们可以运行webpack并看看生成了什么文件：
$ npx webpack
这里我们得到两个新的文件：vendors~app.js和app.js。
vendors~app.js包含所有的第三方库和框架。app.js包含我们自己的代码。
我们可以从HTML页面中删除vendor.js标签并替换为新生成的vendors~app.js和app.js标签：
<!DOCTYPE html>
<html>
<head>
<title>SplitChunksPlugin示例1</title>
<script src="vendors~app.js"></script>
<script src="app.js"></script>
</head>
<body>
<!-- 页面内容 -->
</body>
</html>
现在，我们已经成功地使用splitChunks插件将公共模块分离出来并作为新的chunk生成了一个文件。
示例2：使用cacheGroups选项
我们已经看到了通过简单地配置splitChunks选项，我们就可以将多个JavaScript文件分离成更小的文件。但是，在实际的项目中，如果我们需要更细粒度的控制，例如将所有符合特定条件的文件分离出来并创建一个新的公共模块，我们需要使用cacheGroups选项。
让我们使用optimization.splitChunks.cacheGroups选项来匹配所有在node_modules目录下的文件，并以vendors命名新的chunk，并设置优先级较高，以便尝试优先使用这个chunk，而不是默认的“commons”chunk。
module.exports = {
// ...
optimization: {
splitChunks: {
cacheGroups: {
vendors: {
test: /[\\/]node_modules[\\/]/,
priority: -10,
name: 'vendors',
chunks: 'all'
}
}
}
}
};
重新运行webpack命令，我们可以看到新生成的文件：vendors.js和app.js
$ npx webpack
我们可以修改HTML页面，并使用新的文件名：
<!DOCTYPE html>
<html>
<head>
<title>SplitChunksPlugin示例2</title>
<script src="vendors.js"></script>
<script src="app.js"></script>
</head>
<body>
<!-- 页面内容 -->
</body>
</html>
现在vendors.js已经包含了我们选择的所有第三方依赖库，并且只有在需要的时候才会被加载，这可以显著提高性能。
以上就是详解webpack4之splitchunksPlugin代码包分拆的完整攻略，希望能对你有所帮助。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：详解webpack4之splitchunksPlugin代码包分拆 - Python技术站
微信扫一扫 
支付宝扫一扫 