javascript – Page 3

TECH & AI

Vendor Chunking: The React Optimization I Wish I’d Known Earlier

jackminion May 31, 2026 0

I ignored my bundle size for months. By the time I checked, my production build was several megabytes of JavaScript in a single file — and every deploy forced my users to download all of it again. Vendor chunking is what I wish I’d known earlier.

Let’s say you are building a project using React, and for that project you need some component library, a library to handle date-related things, or a library to handle your state. So you reach for the usual suspects — Material UI, dayjs, TanStack Query, Redux and so on.

Initially, everything will work smoothly for you as well as for your end users. But as you keep shipping new features and adding dependencies, the bundle quietly grows. Locally, you don’t notice. But in production, it’s the end users who end up paying the price. What happens behind the scenes is that, when dependencies are included in the initial bundle, they can significantly increase the JavaScript downloaded by the browser. As a result, you end up with a poor Lighthouse score, slow initial load times, and a large JavaScript bundle — all of which hurt the user experience.

Your production build looks like this:

dist/assets/index-xxxx.js → 1.2 MB

Enter fullscreen mode

Exit fullscreen mode

This is exactly the kind of problem vendor chunking is designed to solve.

What is Vendor Chunking?

Vendor chunking is a technique where you can separate the third-party dependencies from your main bundle chunk. So you will have a main chunk which will contain your main application code and a vendor chunk which will contain the third-party dependency code.

How does Vendor Chunking help with large bundle size?

When you implement vendor chunking, your application is typically split into at least two separate bundles:

Main Chunk: Contains your application code
Vendor Chunk: Contains third-party dependencies and libraries

When a user visits your website for the first time, the browser downloads both chunks and stores them in the cache. This is where caching becomes very useful.

It’s worth noting that vendor chunking doesn’t come into play on the user’s first visit, because the browser still has to fetch both the chunks. The real performance gains show up when a user revisits the website and the cached vendor chunk can be reused.

Since third-party dependencies do not change frequently, the vendor chunk usually remains the same across deployments. On the other hand, whenever you ship new features, bug fixes, or other updates, your application code changes — which results in a new main chunk being generated.

When you generate a new production build, the bundler will again create:

A new main chunk containing the updated application code
The same vendor chunk, because the dependency code has not changed

Now consider this scenario where a user’s browser has already cached both the chunks because the user has already visited your website, and you deploy a new feature to the production. As a result, the user’s browser only needs to download the new main chunk, while the cached vendor chunk can be reused. This is how vendor chunks help in improving user experience.

Vendor Chunking in Action

Now let’s understand this whole thing using the code. I have a React project where I have installed multiple dependencies such as MUI, Chart.js, Lodash, dayjs and React Router.

Before Vendor Chunking, the build will look something like this:

Note: I’ve disabled tree-shaking for this demo to keep the bundle size large and make the impact of vendor chunking more visible.

The build will contain only one JS file and the browser has to download this large ~4.6 MB file.

Now I will implement vendor chunking by adding this code block in my vite.config.ts file:

Note: I’m using Vite v8, which uses Rolldown as the bundler. If you’re on an older Vite version with Rollup, the config syntax will be different

So after this, the build will look something like this:

As you can see, now we have two JS files:

Now the browser has to download both of these files so that our application loads correctly. Here comes the crazy part. Let’s update the code and try to generate the new production build. Here’s what it will generate:

If you compare the files with the previous build, you will find that only index-xx.js changed, while vendor-xx.js stays the same, because we didn’t upgrade any package versions; we only updated the application code.Now when a user revisits our website, the browser will only fetch the new index-xx.js from the server, vendor-xx.js will be served from cache.

This is how vendor chunking helps in performance improvement for web applications.

Splitting Vendors Further

So far we have bundled all the dependencies into a single chunk. This works well for small to medium applications, but as the dependency list grows, a single vendor chunk has a drawback. If you update the version of any library, a new vendor chunk will be generated and users have to re-download the whole thing – even if 95% of the code is same.

To tackle this issue, we can split vendors into multiple chunks. For example, you can keep your UI library in one chunk, your utility libraries in another, and your charting library in a third:

The final node_modules group is a catch-all so dependencies like React land in a vendor chunk too, rather than your main bundle.

After this config, your build output will look something like this:

Note: Just don’t go overboard with splitting — too many small chunks can hurt performance due to HTTP overhead and less effective compression

Wrapping Up

Vendor chunking is one of those optimizations that costs you a few lines of config and pays you back on every deploy. The core idea is simple: your application code changes often, third-party code doesn’t — so why force your users to re-download libraries they already have?

If you haven’t audited your production bundle in a while, run a build and take a look. You might be surprised how much of it is third-party code waiting to be cached properly.

Source link

TECH & AI

TipTap + Yjs + Hocuspocus saves content, but other users only see updates after a page refresh

jackminion May 27, 2026 0

Hi everyone, I’m working on a Next.js app with a TipTap editor and I’m trying to enable real-time collaboration with Yjs and Hocuspocus.

Current setup:

Next.js app

TipTap editor using useEditor() and EditorContent

u/tiptap/extension-collaboration

u/tiptap/extension-collaboration-cursor

u/hocuspocus/provider on the frontend

u/hocuspocus/server running separately

Postgres stores normal TipTap JSON content

Postgres also stores a base64 Yjs state

Current behavior:

User A edits a document section.

The edit saves to the database correctly.

User B can see the update only after refreshing the page.

Without refreshing, User B’s editor does not update live.

What we tried:

Started the Hocuspocus server locally.

Added the Hocuspocus WebSocket URL to the frontend.

The editor can switch between normal TipTap mode and Yjs collaboration mode.

When collaboration mode is forced, the editor reads from Yjs state instead of the normal TipTap JSON content.

If the Yjs state is empty or stale, the document appears blank.

Main question:

What is the correct way to initialize a TipTap editor with existing saved TipTap JSON and then move it into Yjs/Hocuspocus collaboration mode without blanking the document?

Specific questions:

Should the existing TipTap JSON be converted into a Y.Doc before the editor is created?

In collaboration mode, should the TipTap editor content option be undefined?

What is the best practice for saving both Yjs state and normal TipTap JSON to a database?

How can I verify that two users are connected to the same Hocuspocus document and receiving updates live?

What are common reasons Hocuspocus/Yjs appears to save correctly but does not broadcast updates to other users?

Any guidance on the correct TipTap + Yjs + Hocuspocus flow would be appreciated.

Source link

TECH & AI

How does VuReact compile Vue 3’s lifecycle hooks to React?

jackminion May 22, 2026 0

VuReact is a tool that compiles Vue 3 code into standard, maintainable React code. In this article, we will look at how common Vue 3 lifecycle hooks are mapped into React.

If you write Vue lifecycle hooks, what does VuReact generate on the React side?

Before We Start

To keep the examples easy to read, this article follows two simple conventions:

All Vue and React snippets focus on core logic only, with full component wrappers and unrelated configuration omitted.
The discussion assumes you are already familiar with Vue 3 lifecycle hooks such as onMounted, onBeforeMount, onBeforeUpdate, onUpdated, onBeforeUnmount, and onUnmounted.

Compilation Mapping

Vue onMounted() -> React useMounted()

onMounted() is Vue 3’s hook for running logic after a component is mounted for the first time. It is commonly used for initialization requests, subscriptions, and DOM-related setup.

script setup>
import { onMounted } from ‘vue’;

onMounted(() => {
console.log(‘component mounted’);
});
script>

Enter fullscreen mode

Exit fullscreen mode

import { useMounted } from ‘@vureact/runtime-core’;

useMounted(() => {
console.log(‘component mounted’);
});

Enter fullscreen mode

Exit fullscreen mode

VuReact’s useMounted is the runtime adapter for onMounted(), preserving the same post-mount execution timing.

Vue onBeforeMount() -> React useBeforeMount()

onBeforeMount() is Vue 3’s hook for logic that should run right before the first mount.

script setup>
import { onBeforeMount } from ‘vue’;

onBeforeMount(() => {
console.log(‘component is about to mount’);
});
script>

Enter fullscreen mode

Exit fullscreen mode

import { useBeforeMount } from ‘@vureact/runtime-core’;

useBeforeMount(() => {
console.log(‘component is about to mount’);
});

Enter fullscreen mode

Exit fullscreen mode

VuReact’s useBeforeMount is the runtime adapter for onBeforeMount(), preserving the same pre-mount timing.

Vue onBeforeUpdate() -> React useBeforeUpdate()

onBeforeUpdate() runs before a component update, excluding the initial mount. It is useful when you need to inspect or prepare state before the next render is committed.

script setup>
import { reactive, onBeforeUpdate } from ‘vue’;

const state = reactive({ count: 0 });

onBeforeUpdate(() => {
console.log(‘before update, count:’, state.count);
});
script>

Enter fullscreen mode

Exit fullscreen mode

import { useReactive, useBeforeUpdate } from ‘@vureact/runtime-core’;

const state = useReactive({ count: 0 });

useBeforeUpdate(
() => {
console.log(‘before update, count:’, state.count);
},
(state.count),
);

Enter fullscreen mode

Exit fullscreen mode

VuReact’s useBeforeUpdate is the runtime adapter for onBeforeUpdate(). When the React-side API needs dependencies, VuReact analyzes them during compilation and generates the dependency array automatically.

Vue onUpdated() -> React useUpdated()

onUpdated() runs after a component update. It is commonly used to read the latest rendered result or trigger follow-up synchronization work.

script setup>
import { reactive, onUpdated } from ‘vue’;

const state = reactive({ count: 0 });

onUpdated(() => {
console.log(‘after update, count:’, state.count);
});
script>

Enter fullscreen mode

Exit fullscreen mode

import { useReactive, useUpdated } from ‘@vureact/runtime-core’;

const state = useReactive({ count: 0 });

useUpdated(
() => {
console.log(‘after update, count:’, state.count);
},
(state.count),
);

Enter fullscreen mode

Exit fullscreen mode

VuReact’s useUpdated is the runtime adapter for onUpdated(), with dependency analysis handled automatically during compilation when needed.

Vue onBeforeUnmount() -> React useBeforeUnMount()

onBeforeUnmount() is Vue 3’s hook for logic that should run right before a component is removed.

script setup>
import { onBeforeUnmount } from ‘vue’;

onBeforeUnmount(() => {
console.log(‘component is about to unmount’);
});
script>

Enter fullscreen mode

Exit fullscreen mode

import { useBeforeUnMount } from ‘@vureact/runtime-core’;

useBeforeUnMount(() => {
console.log(‘component is about to unmount’);
});

Enter fullscreen mode

Exit fullscreen mode

VuReact’s useBeforeUnMount is the runtime adapter for onBeforeUnmount(), preserving the expected pre-unmount timing.

Vue onUnmounted() -> React useUnmounted()

onUnmounted() is Vue 3’s hook for final cleanup after a component has been removed.

script setup>
import { onUnmounted } from ‘vue’;

onUnmounted(() => {
console.log(‘component unmounted’);
});
script>

Enter fullscreen mode

Exit fullscreen mode

import { useUnmounted } from ‘@vureact/runtime-core’;

useUnmounted(() => {
console.log(‘component unmounted’);
});

Enter fullscreen mode

Exit fullscreen mode

VuReact’s useUnmounted is the runtime adapter for onUnmounted(), preserving the expected unmount timing.

DAILY NEWS