![]() Originally, we expected that users would want a clear separation between their app's Vite configuration and Storybook's Vite configuration. This means you'll no longer need to duplicate your config or manually merge them to keep your configuration aligned. Storybook 7.0 extends from your existing Vite config file. That has streamlined Storybook's install size by 28% so far. Storybook 7.0 supports modern browsers and Node.js versions, which enabled us to remove unnecessary internal dependencies. Vite users demand speed and small, modern dependencies. ![]() Storybook 7.0 instead prebuilds the app using esbuild, which is the same engine that supercharges Vite's development experience. In the past, Storybook used Webpack to build its UI. No Webpack and smaller install sizeĪnother benefit of pre-bundling is that Storybook Vite users will no longer have to install or use Webpack. In a new bootstrapped project, the build time was reduced by over 15 seconds, and the Storybook dev server started up several seconds faster. Storybook does less work to start up each time because all that work is done in advance. Pre-bundling means the Storybook app ships as a compiled code base instead of a set of dependencies that you then have to compile yourself. That was slower because each step takes time. Previously, running Storybook involved building both the component code and the Storybook app on-demand. Storybook has two parts: an iframe that renders your components in isolation and Storybook's own app for navigating stories and addons. Storybook 7.0 ships as a pre-bundled app to speed up start and build times. That means Vite has tighter integration with Storybook functionality and opens the door for automated testing against any core changes. In 7.0, Vite will be one of two built-in options for building your component code (the other is Webpack 5). Over the last year, we re-architected Storybook for first-class Vite support. This experimental Vite adapter saw rapid adoption. Storybook first supported Vite in April 2021 (two months after Vite 2.0 was released) with help from community member Eirik Sletteberg. With nearly GitHub 50k stars, almost 2 million weekly npm downloads, and 650+ contributors, Vite is clearly a “big deal.” It gives you fast startup, instant reloads, widespread compatibility, and easy configuration. Vite is a next-gen build tool that has taken the web development world by storm. ![]()
0 Comments
Leave a Reply. |