This post is part of a series of articles to which heise Developer has explicitly invited young developers – with the aim of informing their own kind, but of course also interested “older semesters”, about current trends, developments, phenomena and personal experiences. The articles in this series of articles appear on a monthly basis. Are you a “Young Professional” yourself and want to be part of this series?
The n apply to the editorial team with a suggestion. She is at your side with helpful tips throughout the writing, editing and approval process.
Problems from webpack
The advantage of this is the reduced loading time for the end user: Instead of thousands of files, the browser only loads a few. However, the runtime of the bundling depends on the number of files.
During the build, a few more seconds are still relatively manageable. It becomes problematic when developing with the development server, because it also uses webpack bundling. If developers change a single file, webpack has to regenerate entire bundles from dozens of files. This is why the so-called hot module replacement – i.e. the immediate replacement of changed components in the browser without the need to reload – quickly loses its focus when the waiting times approach ten seconds. Vite only needs 430 milliseconds to start an empty React application, while Create React App or webpack takes more than 12 seconds (see the following listing).
``` yarn run v1.22.10 $ vite ⚡ Vite dev server running at: > Network: http://192.168.56.1:3000/ > Network: http://192.168.10.1:3000/ > Network: http://192.168.2.119:3000/ > Local: http://localhost:3000/ ready in 430ms ``` ``` [13:07:00] yarn run v1.22.10 $ react-scripts start Starting the development server... [13:07:12] Compiled successfully! You can now view cra-example in the browser. Local: http://localhost:3000 On Your Network: http://192.168.56.1:3000 Note that the development build is not optimized. To create a production build, use yarn build. ```