Some chunks are larger than 500 KiB after minification #9440
Replies: 16 comments 28 replies
-
|
Can't help but i have same problem |
Beta Was this translation helpful? Give feedback.
-
|
same. but did you solve it yet? |
Beta Was this translation helpful? Give feedback.
-
|
I am facing a similar issue with react vite: |
Beta Was this translation helpful? Give feedback.
-
|
i solve this thing by using this thing
|
Beta Was this translation helpful? Give feedback.
-
|
In your vite.config.js use build: { chunkSizeWarningLimit: 1600, } this working file |
Beta Was this translation helpful? Give feedback.
-
|
If you limit the warning, does the issue go? i think you only have removed the warning and the issue is till there, because it will still give you error when you try to deploy it. |
Beta Was this translation helpful? Give feedback.
-
|
Vite provides |
Beta Was this translation helpful? Give feedback.
-
|
Did you solve this ? |
Beta Was this translation helpful? Give feedback.
-
|
Where are those 3 fixes, and does it have any video solution. |
Beta Was this translation helpful? Give feedback.
-
export default defineConfig({
...,
build: {
chunkSizeWarningLimit: 1600
}
}); |
Beta Was this translation helpful? Give feedback.
-
|
Funcionou pra mim perfeitamente. obrigado |
Beta Was this translation helpful? Give feedback.
-
|
Setting a warning limit doesn't do anything but temporarily hide the issue. Upon deployment, you will still get the same warning and it will fail to deploy. |
Beta Was this translation helpful? Give feedback.
-
|
thanks for the info. I am having the same error. do you think that this can cause the firebase to not deploy my app? |
Beta Was this translation helpful? Give feedback.
-
|
Add command in vite.config.js
Full Code // https://vitejs.dev/config/ |
Beta Was this translation helpful? Give feedback.
-
|
That wouldnt really solve anything, just hide the warning. If you actually want to fix it you should use the fixes in the forums he linked in the first posts. |
Beta Was this translation helpful? Give feedback.
-
|
import { defineConfig } from 'vite'; // https://vitejs.dev/config/ With build part in my vite.config.ts I separated modules, but my aws-sdk module is still too big and I don't know how to fix that? |
Beta Was this translation helpful? Give feedback.
-
|
This is just a warning, not an error nor issue. |
Beta Was this translation helpful? Give feedback.
-
|
When I build my project and host it on AWS S3 I have an error on aws-sdk file that "a is not a constructor" in browser console, can that part make that error? |
Beta Was this translation helpful? Give feedback.
-
|
I have quite hard to imagine that the error you are getting would possible have anything to do with the file being over 500kib. |
Beta Was this translation helpful? Give feedback.
-
|
After adding this on vite.config.js it's fixed Full File is like |
Beta Was this translation helpful? Give feedback.
-
|
What is better for user experience: one 600 KB chunk or many chunks of 20 KB each? |
Beta Was this translation helpful? Give feedback.
-
|
@acaele Although judging from the fact that Vite doesn't like chunks over 500 KiB, I would probably assume it would be better to have smaller chunks. |
Beta Was this translation helpful? Give feedback.
-
|
This has a side effect of re-arranging CSS import order. It seems that CSS is imported backwards on this build configuration. |
Beta Was this translation helpful? Give feedback.
-
|
I already used this and it still don't work. |
Beta Was this translation helpful? Give feedback.
-
True, this config does reduce the chunk size, but it screws up the CSS :( |
Beta Was this translation helpful? Give feedback.
-
|
I replaced it with: |
Beta Was this translation helpful? Give feedback.
-
|
python? |
Beta Was this translation helpful? Give feedback.
-
|
yes. |
Beta Was this translation helpful? Give feedback.
-
|
I'm shocked this building tool do not provide any size chunking feature easy to use |
Beta Was this translation helpful? Give feedback.
-
|
I'm totally amazed that there is not some simple documentation on how and when to use the suggestions from the build output.
|
Beta Was this translation helpful? Give feedback.
-
|
Full vite.config.js: import { defineConfig } from "vite"; export default defineConfig({ |
Beta Was this translation helpful? Give feedback.
-
|
Vite docs recommends using their // vite.config.js
import { splitVendorChunkPlugin } from 'vite'
export default defineConfig({
plugins: [splitVendorChunkPlugin()],
})If chunk sizes are still too large after this, you should either investigate where you can lazily load modules to split chunks (via dynamic |
Beta Was this translation helpful? Give feedback.
-
|
splitVendorChunks has been deprecated, rather you are supposed to use build.rollupOptions.output.manualChunks |
Beta Was this translation helpful? Give feedback.
-
|
I add this build section, maybe not best, but work fine for me： build: {
rollupOptions: {
output: {
manualChunks(id: string) {
if (id.indexOf('node_modules') !== -1) {
const basic = id.toString().split('node_modules/')[1];
const sub1 = basic.split('/')[0];
if (sub1 !== '.pnpm') {
return sub1.toString();
}
const name2 = basic.split('/')[1];
return name2.split('@')[name2[0] === '@' ? 1 : 0].toString();
}
}
}
}
}Thanks @ahmadaldabouqii 's idea |
Beta Was this translation helpful? Give feedback.
-
this is my vite config code. Some files are getting bigger. |
Beta Was this translation helpful? Give feedback.
-
this is my vite config code. Some files are getting bigger. |
Beta Was this translation helpful? Give feedback.
-
|
@sanjarDev1 same issue to me, did you find a solution? |
Beta Was this translation helpful? Give feedback.
-
|
unfortunately I couldn't find it. If I find it, I will let you know. If you find it, please let me know |
Beta Was this translation helpful? Give feedback.
-
|
I had to deal with something of the sorts with my Quasar project and documented an approach. Basically this involves using the Rollup Visualiser to look at how the chunks are assembled and then using manualChunks to tune the chunks. The only thing is if you have a single source file that results in a large chunk, then maybe looking at splitting up the source file might be necessary? Of course this is not always possible, such as if you are depending on a third-party package. There are other approaches too, via chunking strategies. The one thing I haven't quite worked out is how to mix this with dynamic import hints? |
Beta Was this translation helpful? Give feedback.
-
|
I used a modified manual chunks function inspired from above answers. This creates separate js files for huge libraries in your project, and rest all other codes are bundled into You can use this build config to get a idea of which are the big libraries in your code: Final output build:
|
Beta Was this translation helpful? Give feedback.
-
|
I was running a Remix application and found it strange that one of my JS files was 914KB in size! I pinpointed my problem by running vite-bundle-visualizer. It showed me that highlight.js, a package I'm using to highlight code, was bundling itself, contributing to the gigantic file size. 
The highlight is the highlight.js package contributing to the overall bundle size To do the same, navigate to your project's root directory (where the vite.config.ts file is: Run: And see which packages Vite includes. Note:Not all packages you can
Example: (Actual production code)
This is a generic component in which I centralize all of my icons in a single place, and then call them via a map key. Problem: Solution 1: This allowed each icon to be solicited only when needed. Problem 2: Solution 2: I also sprinkle some IntersectionObserver to even further delay the import. Bringing everything together (simplified): const iconMap = {
copy: () =>
import("./icon-exports/AiOutlineCopy").then((module) => ({
default: module.AiOutlineCopy,
})),
// Other icons omitted
awsLambda: () =>
import("./icon-exports/AwsLambda").then((module) => ({
default: module.AwsLambda,
})),
};
export type ColorVariant = "white" | "dark" | "red";
export const colorMap: Record<ColorVariant, string> = {
white: "#fff",
dark: "#1e2329",
red: "#e33122",
};
export type IconType = keyof typeof iconMap;
export type IconProps = {
icon: IconType;
color?: ColorVariant;
stroke?: ColorVariant;
fill?: ColorVariant;
size?: number;
width?: string;
height?: string;
customColor?: string;
className?: string;
};
export const Icon: React.FC<IconProps> = (props) => {
const { icon, color, stroke, customColor, size = 24, ...otherProps } = props;
const [loaded, setLoaded] = useState(false);
const { isIntersecting, setRef } = useIntersectionObserver({
root: null,
rootMargin: "0px",
threshold: 0.1,
});
useEffect(() => {
if (isIntersecting) {
setLoaded(true);
}
}, [isIntersecting]);
const Element = loaded ? lazy(iconMap[icon]) : null;
const width = `${size}px`;
const height = `${size}px`;
const colors = {
stroke: stroke ? colorMap[stroke] : undefined,
color: customColor ? customColor : color ? colorMap[color] : undefined,
};
return (
<div ref={setRef} style={{ width, height }}>
{loaded && Element ? (
<Suspense fallback={<div style={{ width, height }} />}>
<Element size={size} {...otherProps} {...colors} />
</Suspense>
) : (
<div style={{ width, height }} />
)}
</div>
);
};Intersection Observer Hook: import { useEffect, useState } from "react";
export const useIntersectionObserver = (options: IntersectionObserverInit) => {
const [isIntersecting, setIsIntersecting] = useState(false);
const [ref, setRef] = useState<HTMLElement | null>(null);
useEffect(() => {
if (!ref) return;
const observer = new IntersectionObserver(([entry]) => {
if (entry.isIntersecting) {
setIsIntersecting(true);
observer.disconnect();
}
}, options);
observer.observe(ref);
return () => observer.disconnect();
}, [ref, options]);
return { isIntersecting, setRef };
};Then, in Creating this indirection will allow Vite to import only the AwsLambda into its own JS file, and render it only when needed |
Beta Was this translation helpful? Give feedback.
-
|
ok sorry i'm no pro here but I have: So I know that dyu/+page.svelte is causing the issue.... But this is not helping me to resolve it. What is the strategy for a newbie at this? |
Beta Was this translation helpful? Give feedback.
and others
-
Hi, Vite team first of all thanks for building such a Tool, coming to a question while I was creating the build file of the project I got a warning of Some chunks are larger than 500 KiB after minification
I tried to search on StackOverflow but didn't satisfied with the answers and didn't find any helpful answers.
(Here is the StackOverflow articles)
can someone please elaborate or help me with this how do I solve and why is it happening
Beta Was this translation helpful? Give feedback.
All reactions