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

目录
相关文章
|
5天前
|
JavaScript 前端开发
在 JeecgBoot 项目中基于 Vue 3 配置多页面入口
本文介绍了在JeecgBoot Vue 3项目中配置多页面入口的步骤。首先,确保下载了项目源码,然后在项目根目录创建`home.html`作为新页面模板。接着,在`src`下建立`multiPage/home`目录,包含`App.vue`和`main.ts`文件以构建新页面。最后,更新`build/vite/plugin/html.ts`中的`htmlPlugin`以支持多页面配置。完成这些步骤后,项目将具备管理多个独立页面的能力。
19 4
|
10天前
【vue3】Argumnt of type ‘history:RouterHistory;}is not assignable to paraeter of type ‘RouterOptions‘.
【vue3】Argumnt of type ‘history:RouterHistory;}is not assignable to paraeter of type ‘RouterOptions‘.
7 0
|
10天前
|
JavaScript
【vue3】vue3中路由hash与History的设置
【vue3】vue3中路由hash与History的设置
11 0
|
1天前
|
存储 JavaScript API
Vue 全局状态管理新宠:Pinia实战指南
 随着Vue.js项目的日益复杂,高效的状态管理变得至关重要。Pinia作为Vue.js官方推荐的新一代状态管理库,以其简洁的API和强大的功能脱颖而出。本文将带您快速上手Pinia,从安装到应用,轻松实现Vue.js项目的全局状态管理,提升开发效率和项目可维护性。
|
3天前
|
JavaScript
vue知识点
vue知识点
12 3
|
8天前
|
JavaScript
|
10天前
|
JavaScript
【vue】el-dialog 内的tinymce弹窗被遮挡的解决办法 及 tinymce打开弹出菜单后直接关闭对话组件,导致该弹出菜单残留
【vue】el-dialog 内的tinymce弹窗被遮挡的解决办法 及 tinymce打开弹出菜单后直接关闭对话组件,导致该弹出菜单残留
22 6
|
7天前
|
存储 缓存 JavaScript
vue代码优化方案
【7月更文挑战第13天】 **Vue.js 优化要点:** 分解大组件以提高复用性和加载速度;利用计算属性与侦听器优化数据处理;使用Object.freeze()减少响应式数据;借助Vuex或Composition API管理状态;实现虚拟滚动和无限加载提升长列表性能;路由懒加载减少初始加载时间;用Vue DevTools检测性能瓶颈;定期代码审查与重构;应用缓存策略;遵循最佳实践与团队规范,提升应用整体质量。
22 2