webpack4实战一 —— SplitChunksPlugin配置指南

最新推荐文章于 2024-06-17 16:27:19 发布
最新推荐文章于 2024-06-17 16:27:19 发布
阅读量1.1k 收藏 2
点赞数 1
分类专栏： vue 文章标签： 缓存 vue webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/aiiit/article/details/109224599
版权
这篇博客详细记录了webpack4中SplitChunksPlugin的配置，包括chunks参数的三种选择、缓存组设置、minSize、maxChunks等关键选项。通过实例解析，帮助读者理解和优化项目构建过程中的代码拆分与缓存策略。
摘要由CSDN通过智能技术生成

最近这个项目中有很多关于webpack的配置,之前对webpack有一些了解,但是不怎么什么,这次正好用到,那就作为自己的日志,记录一下,方便日后自己查看,希望也可以帮助的其他要了解相关知识的朋友.
项目中的代码

    config
            .optimization.splitChunks({
   
              chunks: 'all',
              cacheGroups: {
   
                libs: {
   
                  name: 'chunk-libs',
                  test
最低0.47元/天 解锁文章
~rong~er~
关注
专栏目录
Webpack中SplitChunksPlugin 配置参数详解
11-21
代码分割本身和 webpack 没有什么关系，但是由于使用 webpack 可以非常轻松地实现代码分割，所以提到代码分割首先就会想到使用 webopack 实现。 在 webpack 中是使用 SplitChunksPlugin 来实现的，由于 SplitChunksPlugin 配置参数众多，接下来就来梳理一下这些配置参数。 官网上的默认配置参数如下： module.exports = { //... optimization: { splitChunks: { chunks: 'async', // 代码分割时对异步代码生效，all：所有代码有效，inital：同步代码有效
vue2 + vant +vuex 打包 优化
windbellxy的博客
04-28 830
.babelrc1、安装compression-webpack-plugin 修改 vue.config.js 配置 plugin optimization.splitChunks 减少包体积 2、配置cdn， 将 vuex, vue, vant, router 引入放在 public /cdn 中，配置index.html 3、配置按需引入 安装babel-plugin-import，它可以让我们按需引入组件模块 并在.babelrc中配置plugins .b...
webpack 打包优化 - splitChunks
weixin_54714100的博客
04-19 3523
webpack5 默认情况下只对异步模块做打包优化，额外的打包必须满足 4 个条件（webpack 的默认配置，可修改）。根据需求可调整为只对初始模块做打包优化，或者初始和异步模块一起优化。同时可配置自己的打包规则。简而言之：chunks 控制打包作用范围，其他控制打包规则。webpack5 的 splitChunks 功能是比较强大的，不过推荐还是使用默认模式，或者提取一下第三方库。
vue项目资源打包分割配置，config.optimization.splitChunks提升项目加载速度
最新发布
weixin_42826247的博客
06-17 582
vue项目资源打包分割配置，config.optimization.splitChunks提升项目加载速度
迁移到webpack4：从webpack.optimize.CommonsChunkPlugin到config.optimization.splitChunk
weixin_33725239的博客
06-26 370
问题现象： 迁移到webpack4：使用webpack.optimize.CommonsChunkPlugin插件提取公共代码时候， 报错：webpack4 Error: webpack.optimize.CommonsChunkPlugin has been removed, please use config.optimization.splitChunks instead； ...
chainWebpack之optimization.splitChunks的cacheGroups缓存组代码分块实践案
m0_37239448的博客
12-25 3481
参数，有点强行拽出来的意思，小编在分块过程中也发现这个情况，比如增加缓存组antDesignVue后，打包是可以独立分离出来的，但是如果再加一个缓存组moment或jeecg，会发现，可能jeecg分出来了，但是ant-design-vue又被拽回去原来的包了，要不就是jeecg分不出来，这时候只要加了enforce: true参数，就能分出来，试过不是权重优先级priority的问题，还要多研究研究，过程中基本是看结果图，看哪个文件大，就分一个缓存组；缓存组分包过程中如果发现分不出来，可以加上。
vue-cli3 打包优化之 splitchunks
DongFuPanda的博客
03-15 1万+
Dllplugin 可以把常用库抽离出来，包括 vue，vuex之类的库。但是 ant design vue 是按需加载，且随时有可能引入新的组件，显然不适合放进 dll 中。直接和其他文件打进 vendor.js 有会很大，所以需要将其再单独抽离出来，我决定在 config.optimization.splitChunks 配置如下： const IS_PROD = process.env.NO...
webpack4之SplitChunksPlugin使用指南
08-27
Webpack4 之 SplitChunksPlugin 使用指南 Webpack4 中的 SplitChunksPlugin 是一个非常重要的插件，它可以帮助开发者更好地优化代码的拆分和加载。下面是对 SplitChunksPlugin 的详细介绍。 参数介绍 在使用 ...
详解webpack4之splitchunksPlugin代码包分拆
10-17
Webpack 4 中的 `splitChunksPlugin` 是一个用于优化输出的插件，它允许开发者将共享的代码分离成单独的 chunk，从而实现代码分拆，提高应用的性能和加载速度。在多页面应用中，这个功能尤其重要，因为它能够有效地...
迁移到webpack4：从webpack.optimize.CommonsChunkPlugin到config.optimization.splitChunk，以及有个搜出来的中文解决办法是错的
热门推荐
凝视深渊
05-07 4万+
今天在对着webpack中文指南一点点敲demo，在代码分离这一节遇到了一个报错： webpack4 Error: webpack.optimize.CommonsChunkPlugin has been removed, please use config.optimization.splitChunks instead 哦，原来是原来的插件不能用了，这个中文指南，标的是webpack4...
Error：webpack.optimize.CommonsChunkPlugin has been removed, please use config.optimization.splitChu
weixin_42333548的博客
10-29 4883
如果使用中文webpack文档做代码分离，会有报错，报错详情是： Error: webpack.optimize.CommonsChunkPlugin has been removed, please use config.optimization.splitChunks instead. 解决办法可以参考官方英文文档：https://webpack.js.org/guides/code-...
webpack性能优化-optimization.splitChunks.chunks中的“all“、“async“和“initial“
程序员秋风的博客
10-13 2739
最初，chunks（以及内部导入的模块）是通过内部 webpack 图谱中的父子关系关联的。CommonsChunkPlugin 曾被用来避免他们之间的重复依赖，但是不可能再做进一步的优化。 ——摘自 webpack 从 webpack v4 开始，移除了 CommonsChunkPlugin，取而代之的是 optimization.splitChunks。 而关于 optimization.splitChunks 中的chunks，webpack 官方文档却没有很好的进行举例解释，只说明了 async.
vue项目瘦身之splitChunks
weixin_41597344的博客
07-15 4044
webpack项目瘦身之splitChunks
webpack的优化之SplitChunksPlugin
xiasohuai的博客
03-05 2568
最初，chunks（以及内部导入的模块）是通过内部 webpack 图谱中的父子关系关联的。CommonsChunkPlugin曾被用来避免他们之间的重复依赖，但是不可能再做进一步的优化。 从 webpack v4 开始，移除了CommonsChunkPlugin，取而代之的是optimization.splitChunks。 optimization.splitChunks 下面这个配置对象代表SplitChunksPlugin的默认行为。 webpack.config.js mod...
Error: webpack.optimize.CommonsChunkPlugin has been removed, please use config.optimization.splitChu
u014196765的博客
08-14 6266
跟着 webpack4中文网做代码分离时npm run build时出错， Error: webpack.optimize.CommonsChunkPlugin has been removed, please use config.optimization.splitChunks instead. 自己去官网看了看，https://webpack.js.org/guides/code-sp...
vue.config.js的优化配置
qq575792372的博客
05-08 2306
直接上代码配置： 'use strict' const path = require('path') function resolve(dir) { return path.join(__dirname, dir) } const name = 'vue Admin Template' // page title // If your port is set to 80, // use administrator privileges to execute the command line..
vue-cli3打包后生成的chunk-vendors文件过大，导致加载太慢,利用SplitChunks插件解决，分离chunk
xiasohuai的博客
06-16 7243
直接使用插件解决这个问题！ 第一步：先下载这个插件 第二步：修改vue.config.js配置文件 const CompressionPlugin = require("compression-webpack-plugin") ............ plugins: [ new CompressionPlugin({ algorithm: 'gzip', test: /\.(js|css|less)$/, // 匹配文件名 th...
vue-element-admin 打包gzip压缩优化vue项目大小并部署到Nginx，报404，接口访问不了
叶为正的博客
11-07 3273
在根目录的vue.config.js的！== 'development’这里添加上图所示的配置。 config .when(process.env.NODE_ENV !== 'development', config => { config .plugin('ScriptExtHtmlWebpackPlugin') .after('html') .use('script-e.
webpack4深度解析：splitchunksPlugin的代码分拆策略
总结来说，`SplitChunksPlugin`是webpack4中的一个重要优化工具，通过合理配置，可以有效地进行代码分拆，提高应用的加载速度和用户体验。在实际项目中，需要根据具体需求调整插件的参数，以达到最佳的性能和缓存...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值