webpack4 optimization.splitChunks的注意点

最新推荐文章于 2024-06-27 16:27:07 发布
最新推荐文章于 2024-06-27 16:27:07 发布
阅读量9.3k 收藏
点赞数 4
分类专栏： javascript webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sunq1982/article/details/81511848
版权
本文介绍了在使用webpack4的optimization.splitChunks进行代码分离时遇到的问题，重点强调了新生成的chunk大小需超过30kb（未压缩前）才能成功分离的细节，以及如何通过增加无效代码达到这一目标。
摘要由CSDN通过智能技术生成

写了个共用的chunk，没有办法实现代码分离。
搞了一个多小时，最后发现官方文档的这句话，吐血了！

webpack will automatically split chunks based on these conditions:

New chunk can be shared OR modules are from the node_modules folder
New chunk would be bigger than 30kb (before min+gz)
Maximum number of parallel requests when loading chunks on demand would
最低0.47元/天 解锁文章
sunq1982
关注
专栏目录
Webpack 实践 - optimization.splitChunks
军火库
01-28 1819
最近还整理一份JavaScript与ES的笔记，一共25个重要的知识点，对每个知识点都进行了讲解和分析。能帮你快速掌握JavaScript与ES的相关知识，提升工作效率。
vue项目首次加载缓慢，利用splitChunks分包打包导致上线chunk-XX.js文件过多页面加载缓慢资源请求阻塞问题解决方案
最新发布
qq_45429889的博客
07-10 618
vue项目首次加载缓慢，利用splitChunks分包打包导致上线chunk-XX.js文件过多页面加载缓慢资源请求阻塞问题解决方案由于后台管理项目一直在迭代开发，不知不觉项目包过大（30MB左右），每次项目上线后加载最新资源文件（chunk-vendors）用时过久。白屏时间比较长用户体验感特别差。
Webpack中SplitChunksPlugin 配置参数详解
11-21
代码分割本身和 webpack 没有什么关系，但是由于使用 webpack 可以非常轻松地实现代码分割，所以提到代码分割首先就会想到使用 webopack 实现。 在 webpack 中是使用 SplitChunksPlugin 来实现的，由于 SplitChunksPlugin 配置参数众多，接下来就来梳理一下这些配置参数。 官网上的默认配置参数如下： module.exports = { //... optimization: { splitChunks: { chunks: 'async', // 代码分割时对异步代码生效，all：所有代码有效，inital：同步代码有效
webpack 之 splitChunks分包策略
weixin_47339511的博客
06-27 1555
将满足拆分规则的构建内容抽出来单独打包，从而达到抽离公共模块，减少重复打包的目的。中的配置项用来确定具体的拆分规则，其中的 cacheGroups 配置项必须同时满足其下的所有条件才能生效。// 生成的 chunk 的最小体积，单位为字节（bytes）。内容超过了minSize的值，才会进行打包// 在拆分之前，必须共享的模块的最小 chunk 数。// 在按需加载时，允许的最大并行请求数。// 入口点允许的最大并行请求数。
webpack 的 splitChunks 插件不能正常打包使用？
Baron的技术blog
12-01 660
来，首先上图： 问题：就是按照官网配置的呀？为啥不打包出dist呢？ https://webpack.js.org/plugins/split-chunks-plugin/#root 版本： 解决办法： 看了一大堆博客，最后在 splitChunks 中添加一个 name 属性即可。很崩溃，具体原因找了很久没找到……不过幸运的是解决了。 ...
Webpack 4 SplitChunksPlugin配置方案（转）
weixin_33810302的博客
06-19 230
通常情况下我们的 WebApp 是有我们的自身代码和第三方库组成的,我们自身的代码是会常常变动的,而第三方库除非有较大的版本升级,不然是不会变的,所以第三方库和我们的代码需要分开打包,我们可以给第三方库设置一个较长的强缓存时间,这样就不会频繁请求第三方库的代码了。 那么如何提取第三方库呢?在 webpack4.x 中,SplitChunksPlugin 插件取代了 CommonsChu...
webpack 打包优化 - splitChunks
weixin_54714100的博客
04-19 3233
webpack5 默认情况下只对异步模块做打包优化，额外的打包必须满足 4 个条件（webpack 的默认配置，可修改）。根据需求可调整为只对初始模块做打包优化，或者初始和异步模块一起优化。同时可配置自己的打包规则。简而言之：chunks 控制打包作用范围，其他控制打包规则。webpack5 的 splitChunks 功能是比较强大的，不过推荐还是使用默认模式，或者提取一下第三方库。
webpack4之splitChunks.minSize和splitChunks.maxSize
YaoDeBiAn的博客
02-01 3942
概要 minSize和maxSize分别表示chunk在被拆分之前的最小体积和最大体积。（maxSize可以小于minSize） 准备工作 目录 root ——dist（打包之后的文件夹） ——node_modules（下载的包） ——src（项目脚本目录） ————entry（入口点脚本） ————modules（入口点中引入的模块） ——package.json（包管理文件） ——webp...
webpack性能优化-optimization.splitChunks.chunks中的“all“、“async“和“initial“
程序员秋风的博客
10-13 2666
最初，chunks（以及内部导入的模块）是通过内部 webpack 图谱中的父子关系关联的。CommonsChunkPlugin 曾被用来避免他们之间的重复依赖，但是不可能再做进一步的优化。 ——摘自 webpack 从 webpack v4 开始，移除了 CommonsChunkPlugin，取而代之的是 optimization.splitChunks。 而关于 optimization.splitChunks 中的chunks，webpack 官方文档却没有很好的进行举例解释，只说明了 async.
关于webpack4.0打包代码分割optimization.splitChunks的配置详解
热门推荐
逗比界一朵花
07-25 1万+
optimization可以实现很多功能，最常见的功能是： - three shaking 只支持ES Module模块的引入，删除没有引用的模块打包 - Code Splitting 拆分代码，提高执行效率和用户体验
webpack4 分包(splitChunks)
goutinga的博客
04-02 4275
前言 用过webpack已经很久了，一直没有好好研究过分包，今天花点时间来好好研究下这个。 优势 打包优化： 公共代码提取，体积变小 用户体验优化：按需加载，下载更快，白屏更短 过程 module、chunk和bundle 要研究分包，首先要分清这三个概念 module: 模块，每个import 都是一个module模块 chunk: 依赖链路模块，我的个人理解，因为从一开始的entry配的入口文件开始，随着递归寻找其他的依赖文件，最后把所有的依赖串起来，这就是一个chunk。但是我们可以拆分多个chu
关于vue-cli3打包不同环境代码时webpack配置splitChunks的坑
qq_38040973的博客
06-01 1780
公司的项目需要区分不同版本的后台管理系统，所以配置多个.env.xxx文件来打包。 一开始根据配置文件的后缀修改了相应NODE_ENV、 ENV
理解webpack4.splitChunks之其余要点
weixin_30583563的博客
01-29 131
　　splitChunks除了之前文章提到的规则外，还有一些要点或是叫疑惑因为没有找到官方文档的明确说明，所以是通过我自己测试总结出来的，只代表我自己的测试结果，不一定正确。 splitChunks.cacheGroup必须同时满足各个条件才能生效，这个之前我理解错误，我以为比如minSize或是minChunks等条件只要满足一条就可以拆分，但是实际上必须同时满足才行 splitChun...
webpack报错之-- SplitChunksPlugin
xwwajj
11-06 315
webpack 报错如下 改成：filename -> name
webpack生产阶段的配置
weixin_41105030的博客
03-26 542
开发–测试–生产 开发版 这是开发版本的配置 webpack.pub.config.js
vue项目瘦身之splitChunks
weixin_41597344的博客
07-15 3968
webpack项目瘦身之splitChunks
vue.config.js配置configureWebpack的optimization splitChunks页面空白
寬真
03-14 763
确实通过这种方式解决：原因可能是这个：
optimization.splitChunks
10-18
`optimization.splitChunks` 是 Webpack 中用于代码分割的配置选项。它可以将多个入口文件中共同依赖的模块提取出来，形成一个单独的 chunk，从而减少重复代码的加载和执行，提高页面加载速度。 具体来说，`...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值