Vue3】vite打包报错:块的大小超过限制,Some chunks are larger than 500kb after minification

简介: Vue3】vite打包报错:块的大小超过限制,Some chunks are larger than 500kb after minification

Vue3】vite打包报错:块的大小超过限制,Some chunks are larger than 500kb after minification

image.png

解决

1、加大限制的大小将500kb改成1000kb或者更大:

chunkSizeWarningLimit:1500

2、分解块,将大块分解成更小的块,在vite.config.js当中的build下面进行配置

rollupOptions: {
   
   
        output:{
   
   
            manualChunks(id) {
   
   
              if (id.includes('node_modules')) {
   
   
                  return id.toString().split('node_modules/')[1].split('/')[0].toString();
              }
          }
        }
    }

完整

在vite.config.ts里添加如下代码

build: {
   
   
    chunkSizeWarningLimit: 1500,
    rollupOptions: {
   
   
      output: {
   
   
        manualChunks(id) {
   
   
          if (id.includes('node_modules')) {
   
   
            return id.toString().split('node_modules/')[1].split('/')[0].toString();
          }
        }
      }
    }
  },

参考
Vue3】vite打包报错:块的大小超过限制,Some chunks are larger than 500kb after minification

目录
相关文章
|
19天前
|
JavaScript 前端开发 算法
Vue 3 和 Vue 2 的区别及优点
Vue 3 和 Vue 2 的区别及优点
|
19天前
|
存储 JavaScript 前端开发
基于 ant-design-vue 和 Vue 3 封装的功能强大的表格组件
VTable 是一个基于 ant-design-vue 和 Vue 3 的多功能表格组件,支持列自定义、排序、本地化存储、行选择等功能。它继承了 Ant-Design-Vue Table 的所有特性并加以扩展,提供开箱即用的高性能体验。示例包括基础表格、可选择表格和自定义列渲染等。
|
2月前
|
JavaScript 前端开发 UED
vue2和vue3的响应式原理有何不同?
大家好,我是V哥。本文详细对比了Vue 2与Vue 3的响应式原理:Vue 2基于`Object.defineProperty()`,适合小型项目但存在性能瓶颈;Vue 3采用`Proxy`,大幅优化初始化、更新性能及内存占用,更高效稳定。此外,我建议前端开发者关注鸿蒙趋势,2025年将是国产化替代关键期,推荐《鸿蒙 HarmonyOS 开发之路》卷1助你入行。老项目用Vue 2?不妨升级到Vue 3,提升用户体验!关注V哥爱编程,全栈开发轻松上手。
103 2
|
2月前
|
JavaScript 前端开发 算法
高效工作流:用Mermaid绘制你的专属流程图;如何在Vue3中导入mermaid绘制流程图
mermaid是一款非常优秀的基于 JavaScript 的图表绘制工具,可渲染 Markdown 启发的文本定义以动态创建和修改图表。非常适合新手学习或者做一些弱交互且自定义要求不高的图表 除了流程图以外,mermaid还支持序列图、类图、状态图、实体关系图等图表可供探索。 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
2月前
|
JavaScript 前端开发 API
管理数据必备;侦听器watch用法详解,vue2与vue3中watch的变化与差异
一篇文章同时搞定Vue2和Vue3的侦听器,是不是很棒?不要忘了Vue3中多了一个可选项watchEffect噢。 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
缓存 资源调度 前端开发
用webpack4带你实现一个vue的打包的项目
一个用webpack4打包的vue 的项目,参照vue-cli的webpack配置,一步一步带你实现一个vue的打包的项目,每一个commit对应一个步骤。
3001 0
|
29天前
|
JavaScript
vue实现任务周期cron表达式选择组件
vue实现任务周期cron表达式选择组件
115 4
|
8天前
|
人工智能 自然语言处理 JavaScript
用 CodeBuddy 搭建Vue框架 像呼吸一样简单
本文介绍如何借助 CodeBuddy 快速创建 Vue 项目。CodeBuddy 是一款支持自然语言编程的工具,能根据用户需求自动生成代码,降低开发门槛。文章详细说明了通过 CodeBuddy 创建 Vue 项目的步骤,包括解决项目创建失败的问题、自动补全代码功能以及启动开发服务器的方法。无论开发者经验如何,CodeBuddy 都能显著提升效率,让开发更专注创意实现。
|
5月前
|
JavaScript
vue使用iconfont图标
vue使用iconfont图标
233 1
|
19天前
|
缓存 JavaScript 前端开发
Vue 基础语法介绍
Vue 基础语法介绍