The Dark Side of Zod: When Convenience Comes with “Weight”
In the TypeScript community, Zod is almost the default choice for data validation. The chainable syntax like z.string().email() is truly addictive because it’s fast to write and easy to read. However, the price for this convenience often lies in the Bundle Size—something many devs only notice when the project has already bloated.
The story began when I refactored an admin dashboard with about 50K lines of code. When I ran webpack-bundle-analyzer, I was genuinely shocked: Zod took up nearly 50KB (gzipped). The paradox was that the project only used about 10% of its features for simple string and object checks. Because Zod does not support effective Tree-shaking, even if you only use a single function, the browser still has to download almost the entire library.
Why is Zod so Difficult to Optimize?
The core weakness lies in the Method Chaining architecture. To support the z.string().email() style, Zod must define all methods inside a massive class or object.
Tools like Webpack or Vite cannot determine whether you are actually using .email() or not. As a result, users have to carry redundant code, increasing the LCP (Largest Contentful Paint) and lengthening JavaScript execution time. For low-end mobile devices, 50KB of JavaScript isn’t just a number; it’s a palpable delay.
Valibot: Game-Changing Functional Thinking
Valibot solves this problem using a Modular approach. Instead of stuffing everything into one object, Valibot breaks features down into individual functions. You only import what you need.
This mechanism allows Tree-shaking to work at full capacity. If you don’t use email() or url(), they disappear from the final build file. Practice shows that Valibot can be up to 90% smaller than Zod (only about under 5KB gzipped for typical cases). This is an extremely impressive figure.
Implementing Valibot in Real-World Projects
1. Quick Installation
You can add Valibot to your project with a single command:
npm install valibot
# Or use pnpm/yarn
pnpm add valibot2. Defining Schemas: A Shift in Mindset
Look at how Valibot restructures Schemas to optimize size compared to Zod.
With Zod (All-in-one):
import { z } from 'zod';
const UserSchema = z.object({
username: z.string().min(3),
email: z.string().email(),
});With Valibot (Import only what you use):
import * as v from 'valibot';
const UserSchema = v.object({
username: v.pipe(v.string(), v.minLength(3)),
email: v.pipe(v.string(), v.email()),
age: v.optional(v.number()),
});Here, v.pipe() acts as a connector for conditions. This syntax might look slightly longer at first glance, but it is the key that allows the bundler to strip away unused code.
3. Parsing Data and Handling Errors
Valibot provides two main ways to check data, depending on how you want to handle the logic.
const rawData = { username: "dev_viet", email: "[email protected]" };
// Method 1: Use for logic that needs to throw an error immediately
try {
const data = v.parse(UserSchema, rawData);
} catch (err) {
console.error(err);
}
// Method 2: Safe parse (Recommended for cleaner code)
const result = v.safeParse(UserSchema, rawData);
if (result.success) {
console.log("Valid data:", result.output);
} else {
console.log("Specific errors:", result.issues);
}When Should You Actually Switch to Valibot?
You don’t necessarily need to tear everything down and rebuild if your project is running fine. However, prioritize Valibot in these 2 scenarios:
- Pure Client-side Applications: Landing Pages or E-commerce sites that prioritize extremely fast page load speeds.
- Library/SDK Development: Don’t force your library users to carry an extra 50KB from Zod just to validate a few input parameters.
Recently, I replaced Zod in a registration module. The result? The bundle size dropped by 28KB immediately. For users on weak 3G networks, this helped the form display and become interactive about 200-300ms faster.
Conclusion
Valibot is not just a validation tool; it represents the modularization trend in the modern JavaScript ecosystem. Although its ecosystem may not yet match Zod in terms of the number of plugins, its lightweight nature and performance are undeniable.
If you are already familiar with Zod, switching to Valibot only takes about 15 minutes. Try optimizing your next project; your users will thank you for it.
