热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

优化Vite1.0至2.0升级过程中遇到的某些代码块过大问题解决方案

本文详细探讨了在将项目从Vite1.0升级到2.0的过程中,如何解决某些代码块过大的问题。通过具体的编码示例,文章提供了全面的解决方案,帮助开发者有效优化打包性能。

打包项目过程中遇到警告 (想看结果,可以滑至底部)

输出文件名字/static/vendor.9b5698e4.js 806.03kb / brotli: skipped (large chunk)

Some chunks are larger than 500kb after minification. Consider:

  • Using dynamic import() to code-split the application
  • Use build.rollupOptions.output.manualChunks to improve chunking: rollup.js
  • Adjust chunk size limit for this warning via build.chunkSizeWarningLimit.

由于打包有些依赖包体积过于庞大,提示你进行配置分割;

如何进行配置分割

根据提示进入到rollup.js

打开后你会看到一堆英文,还有两个小小的代码块

  manualChunks: {
      lodash: ["lodash"]
  }
 
  manualChunks(id) {
      if (id.includes("node_modules")) {
          return "vendor";
      }
  }

你可以看到 output.manualChunks 这个应该是放在rollup打包配置里面的

module.exports = {
  build: {
    rollupOptions: {
        output:{
            manualChunks: {
                lodash: ["lodash"]
            }
        }
    }
  }
}

再次运行打包你会发现 在你打包结果的中会有多了一个lodash,但是少了之前的vendor的大文件,其他的文件又变大了

输出文件名字/static/lodash.fe9934f4.js 0.23kb / brotli: 0.12kb

然后你在换个另外一个返回 return "vendor" 好像除了变大了其他的没什么变化,换个返回值试试

module.exports = {
  build: {
    rollupOptions: {
        output:{
            manualChunks(id) {
              if (id.includes("node_modules")) {
                  return "wq";
              }
          }
        }
    }
  }
}

打包的结果如下,发现好像多了一个css,大小没有是什么改变,还变大了

打印一下这个id看看是什么玩意,猜测应该是一些依赖包,因为是看有没有node_modules

  module.exports = {
    build: {
      rollupOptions: {
          output:{
              manualChunks(id) {
                if (id.includes("node_modules")) {
                    console.log(id,"======")
                    return "wq";
                }
            }
          }
      }
    }
  }

发现都是一些依赖包,既然是可以打印那我是不是可以返回对于的包的名字,开干

/node_modules/element-plus/lib/index.esm.js

我们直接以"node_modules/"进行分割 取第二个

  module.exports = {
    build: {
      rollupOptions: {
          output:{
              manualChunks(id) {
                if (id.includes("node_modules")) {
                    console.log(id.toString().split("node_modules/")[1])
                    return "aa";
                }
            }
          }
      }
    }
  }

然后在以"/"进行切割取第一个 console.log("值为",id.toString().split('node_modules/')[1].split('/')[0].toString())

最好我们就以分割的值为返回的值就可以了 就不会报警告包体积太大了,而且他会把重复的放在同一个名字下不会有重复

  module.exports = {
    build: {
      rollupOptions: {
          output:{
              manualChunks(id) {
                if (id.includes("node_modules")) {
                    return id.toString().split("node_modules/")[1].split("/")[0].toString();
                }
            }
          }
      }
    }
  }

重点在最后:这个文件太大其实不是这样去处理,这是只是视觉上的减小,其实他只不过是把大文件拆开来分成很多分了而已, 没什么实质性的作用,只是当时我在使用时遇到情况,才去进行处理,如果大佬想要知道怎么处理,可以看一下这篇文章 点击这里,这是我一位大佬进行交流把文件进行压缩的方法,使得网站访问速度大大提高

补充:会生成大量1kb的文件,反而文件数量多了不少,如何将所有小文件打包一起?

在之前把文件拆分虽然体积减小了但是文件数量增多了,既然rollup可以把文件整合,我们把文件拆分,那么我们就可以把单独体积大的文件拿出来,其余的文件整合,这样就可以把那些很小的文件和一起,由于我目前没有找到可以获取每个包文件的大小,只能通过先拆分打包后可以看到具体哪几个包体积大,然后把这几个包单独拿出来处理;当然这样的方法肯定不行,我只提供思路,如果哪位大佬知道如果获取文件的大小,可以评论告诉我,谢谢大佬门了

 manualChunks(id) {
                    if (id.includes("node_modules")) {
                        //我这里用到其他包不多,最大的就是element-plus我把它单独拿出来,其余的都返回随便一个名字,
                        // 和之前没有配置相比,文件就只会多了element-plus和一个wq的js
                        if(id.toString().split("node_modules/")[1].split("/")[0].includes("element-plus")){
                            return "element-plus"
                        }else{
                            return "wq"
                        }
                        // return id.toString().split("node_modules/")[1].split("/")[0].toString();
                    }
                }

到此这篇关于解决项目vite1.0升级到2.0打包遇到Some chunks are larger问题的文章就介绍到这了,更多相关vite1.0升级到2.0内容请搜索编程笔记以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程笔记!


推荐阅读
  • 1:有如下一段程序:packagea.b.c;publicclassTest{privatestaticinti0;publicintgetNext(){return ... [详细]
  • 本文将介绍如何编写一些有趣的VBScript脚本,这些脚本可以在朋友之间进行无害的恶作剧。通过简单的代码示例,帮助您了解VBScript的基本语法和功能。 ... [详细]
  • 本文详细介绍了如何在Linux系统上安装和配置Smokeping,以实现对网络链路质量的实时监控。通过详细的步骤和必要的依赖包安装,确保用户能够顺利完成部署并优化其网络性能监控。 ... [详细]
  • 1.如何在运行状态查看源代码?查看函数的源代码,我们通常会使用IDE来完成。比如在PyCharm中,你可以Ctrl+鼠标点击进入函数的源代码。那如果没有IDE呢?当我们想使用一个函 ... [详细]
  • 本文详细介绍了 Dockerfile 的编写方法及其在网络配置中的应用,涵盖基础指令、镜像构建与发布流程,并深入探讨了 Docker 的默认网络、容器互联及自定义网络的实现。 ... [详细]
  • 本文介绍了如何使用 Spring Boot DevTools 实现应用程序在开发过程中自动重启。这一特性显著提高了开发效率,特别是在集成开发环境(IDE)中工作时,能够提供快速的反馈循环。默认情况下,DevTools 会监控类路径上的文件变化,并根据需要触发应用重启。 ... [详细]
  • C++实现经典排序算法
    本文详细介绍了七种经典的排序算法及其性能分析。每种算法的平均、最坏和最好情况的时间复杂度、辅助空间需求以及稳定性都被列出,帮助读者全面了解这些排序方法的特点。 ... [详细]
  • c# – UWP:BrightnessOverride StartOverride逻辑 ... [详细]
  • 本文详细介绍了如何使用 Yii2 的 GridView 组件在列表页面实现数据的直接编辑功能。通过具体的代码示例和步骤,帮助开发者快速掌握这一实用技巧。 ... [详细]
  • 本文深入探讨 MyBatis 中动态 SQL 的使用方法,包括 if/where、trim 自定义字符串截取规则、choose 分支选择、封装查询和修改条件的 where/set 标签、批量处理的 foreach 标签以及内置参数和 bind 的用法。 ... [详细]
  • 在前两篇文章中,我们探讨了 ControllerDescriptor 和 ActionDescriptor 这两个描述对象,分别对应控制器和操作方法。本文将基于 MVC3 源码进一步分析 ParameterDescriptor,即用于描述 Action 方法参数的对象,并详细介绍其工作原理。 ... [详细]
  • 本文探讨了如何在给定整数N的情况下,找到两个不同的整数a和b,使得它们的和最大,并且满足特定的数学条件。 ... [详细]
  • 2023年京东Android面试真题解析与经验分享
    本文由一位拥有6年Android开发经验的工程师撰写,详细解析了京东面试中常见的技术问题。涵盖引用传递、Handler机制、ListView优化、多线程控制及ANR处理等核心知识点。 ... [详细]
  • 优化ListView性能
    本文深入探讨了如何通过多种技术手段优化ListView的性能,包括视图复用、ViewHolder模式、分批加载数据、图片优化及内存管理等。这些方法能够显著提升应用的响应速度和用户体验。 ... [详细]
  • 本文详细介绍了Akka中的BackoffSupervisor机制,探讨其在处理持久化失败和Actor重启时的应用。通过具体示例,展示了如何配置和使用BackoffSupervisor以实现更细粒度的异常处理。 ... [详细]
author-avatar
弱柳纤纤_
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有