Some chunks are larger than 500 KiB after minification #9440
Replies: 20 comments 49 replies
-
|
Can't help but i have same problem |
Beta Was this translation helpful? Give feedback.
-
Your method is described in China as "掩耳盗铃" |
Beta Was this translation helpful? Give feedback.
-
That is how I am going to describe it (in english) from now on 😆
|
Beta Was this translation helpful? Give feedback.
-
|
....If the warning doesn't show up.... the problem doesn't exist.... just cover your ears and get rid of the warning bell ever so quietly.... |
Beta Was this translation helpful? Give feedback.
-
Tutorial: How not to solve an issue |
Beta Was this translation helpful? Give feedback.
-
Thanks for stealing a sincere laugh |
Beta Was this translation helpful? Give feedback.
-
|
Vite provides |
Beta Was this translation helpful? Give feedback.
-
|
Just in case, the actual logic is: vite/packages/vite/src/node/plugins/reporter.ts Lines 254 to 268 in b07c036 |
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 build: {
rollupOptions: {
output:{
manualChunks(id) {
if (id.includes('node_modules')) {
return id.toString().split('node_modules/')[1].split('/')[0].toString();
}
}
}
}
}Full File is like export default defineConfig({
plugins: [
vue(),
laravel({
input: ['resources/js/app.js'],
refresh: true,
}),
i18n(),
],
resolve: {
alias: {
vue: 'vue/dist/vue.esm-bundler.js',
ziggy: path.resolve('vendor/tightenco/ziggy/dist/vue.es.js'),
},
},
build: {
rollupOptions: {
output:{
manualChunks(id) {
if (id.includes('node_modules')) {
return id.toString().split('node_modules/')[1].split('/')[0].toString();
}
}
}
}
}
}); |
Beta Was this translation helpful? Give feedback.
-
|
I tried running this, it worked fine on my local machine, but it broke production when deployed on cloudflare. I am using react+vite instead of vue, if it matters |
Beta Was this translation helpful? Give feedback.
-
|
what is the variable for the id |
Beta Was this translation helpful? Give feedback.
-
|
This will have issues with "Github pages" when using pnpm package manager. Check this approach which works fine for pnpm: #9440 (comment) |
Beta Was this translation helpful? Give feedback.
-
|
Functionally, this works for my application...but it also wrecks blocking time and FCP in lighthouse. If you use it, make sure to A/B test with and without it. |
Beta Was this translation helpful? Give feedback.
-
|
Some modules give error in production. |
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.
-
|
Vite.js uses Rollup and esbuild in the background. esbuild has not yet released a v1 whereas it's safe to say Rollup is a well supported tool. I am wondering if Vite.js is worth all the complexity when I could simply use Rollup by itself. |
Beta Was this translation helpful? Give feedback.
-
Without knowing the details of your specific use-case, then the decision is yours to make. Though I’d recommend reading any articles on what Vite adds to the mix before deciding. One such article: https://verpex.com/blog/website-tips/vite-vs-rollup-a-detailed-comparison-for-web-development |
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.
-
|
With more mature variable names: output: {
manualChunks(id) {
if (id.includes('node_modules')) {
const modulePath = id.split('node_modules/')[1];
const topLevelFolder = modulePath.split('/')[0];
if (topLevelFolder !== '.pnpm') {
return topLevelFolder;
}
const scopedPackageName = modulePath.split('/')[1];
const chunkName = scopedPackageName.split('@')[scopedPackageName.startsWith('@') ? 1 : 0];
return chunkName;
}
}
} |
Beta Was this translation helpful? Give feedback.
-
yeeeeeah, amazing |
Beta Was this translation helpful? Give feedback.
-
Ran into some typescript issues with output: {
manualChunks(id) {
if (id.includes('node_modules')) {
const modulePath = id.split('node_modules/')[1];
const topLevelFolder = modulePath?.split('/')[0];
if (topLevelFolder !== '.pnpm') {
return topLevelFolder;
}
// changed . to ?. for the two lines below:
const scopedPackageName = modulePath?.split('/')[1];
const chunkName = scopedPackageName?.split('@')[scopedPackageName.startsWith('@') ? 1 : 0];
return chunkName;
}
},
} |
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.
-
|
Here's how mine worked: |
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.
-
|
You need to tune your bundling. As an example (we use Quasar for our project): function manualChunks (id) {
if (id.includes('/vue/') || id.includes('/@vue/')) {
return 'vue';
} else if (id.includes('/quasar/')) {
return 'quasar';
} else if (id.includes('/markdown-it/')) {
return 'md';
} else if (id.includes('/@ac-dev/')) {
return 'geo';
} else if (id.includes('node_modules')) {
return 'vendor';
} else {
return 'main';
}
}And then use this with your rollup options: For pure Vite: rollupOptions: {
output: {
manualChunks
}
}If using with Quasar: extendViteConf (viteConf) {
viteConf.build = mergeConfig(viteConf.build, {
rollupOptions: {
output: {
manualChunks
}
}
});
},You should also leverage the visualizer plugin to tune the bundling for your project. Note sometimes trying to get something below 500KB is a challenge. For example, in another project I wasn't able to find a working solution for ThreeJS, but I haven't tried again recently. |
Beta Was this translation helpful? Give feedback.
-
|
Thank you so much! |
Beta Was this translation helpful? Give feedback.
-
|
i was also facing that error then i used this build in vite.config.js it told me which particular import was taking to much size , it turned out to be fontawesome icons, then i used react icons instead of fontawesome and problwm solved build: { |
Beta Was this translation helpful? Give feedback.
-
|
Saya coba hosting di vercel dan berhasil. Saya menambahkan ssr menjadi false di nuxt config. Saya menggunakan vue fire. Abaikan error chuck terlalu besar atau lebih dari 500 kb. |
Beta Was this translation helpful? Give feedback.
-
|
Please write in English for everyone’s benefit. A translation (computer assisted), from Indonesian:
|
Beta Was this translation helpful? Give feedback.
-
|
So isn't the vite issue i guess. |
Beta Was this translation helpful? Give feedback.
-
|
Does anyone know if manual chunks like this: put whole library into chunk? without allowing any tree-shaking? |
Beta Was this translation helpful? Give feedback.
and others
Uh oh!
There was an error while loading. Please reload this page.
-
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