You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
@@ -10,6 +10,14 @@ This project is a compilation of different approaches in React development that
10
10
11
11
You can also check a [React Proto Lite](https://github.com/StopNGo/react-proto-lite) - Template React project for fast SPA prototyping. It contains only everything necessary for Single Page Application projects without any server side parts.
12
12
13
+
## Huge Update: Migrating to Rspack
14
+
15
+
Starting from version `2.0.0`, this project uses [Rspack](https://rspack.dev/) as the primary bundler.
16
+
17
+
Rspack is a high performance JavaScript bundler written in Rust. It offers strong compatibility with the webpack ecosystem, allowing for seamless replacement of webpack, and provides lightning fast build speeds.
18
+
19
+
Webpack is still available as an option ([rspack vs webpack](#rspack-vs-webpack) and [switching back to webpack](#switching-back-to-webpack)).
20
+
13
21
---
14
22
-[Issue](#issue)
15
23
-[What's Inside](#whats-inside)
@@ -26,7 +34,7 @@ You can also check a [React Proto Lite](https://github.com/StopNGo/react-proto-l
26
34
27
35
Every new React developer knows that React is a library, not a complete framework. Thus, it provides maximum flexibility. However, a lot of knowledge is required to create a fully functional web application powered with React.
28
36
29
-
That is why there exist such a famous framework as [Next.js](https://nextjs.org/) as well as a tool [Create React App (CRA)](https://create-react-app.dev/).
37
+
That is why there exist such a famous framework as [Next.js](https://nextjs.org/) as well as a tool [Create React App (CRA)](https://create-react-app.dev/) or [Rsbuild for React](https://rsbuild.dev/guide/framework/react).
30
38
31
39
Despite the advantages that such tools have, there are some cons that their user may face:
32
40
@@ -46,7 +54,7 @@ Thus, the goal of this project is to **collect in one place all the most common
46
54
Core:
47
55
48
56
-**React** 18+ (**Preact** 10+ as an option, see [comparison](#react-vs-preact) below)
49
-
-**webpack** 5+ (with optional **SWC** support and SSR or static build; [why not Vite?](#why-not-vite))
57
+
-**Rspack** 1 (**webpack** 5+ as an option) with **SWC** support and SSR or static build ([why not Vite?](#why-not-vite), [rspack vs webpack](#rspack-vs-webpack) and [switching back to webpack](#switching-back-to-webpack))
50
58
-**TypeScript** (with strict rules, including webpack configuration)
2. Delete the `_webpack` folder if you are not going to use webpack bundler or [switch to it](#switching-back-to-webpack) before installing the packages.
142
+
143
+
3. Install all packages:
134
144
135
145
`npm i`
136
146
137
-
3. Run project in a development mode:
147
+
4. Run project in a development mode:
138
148
139
149
`npm start`
140
150
141
-
4. Open your browser with the next address:
151
+
5. Open your browser with the next address:
142
152
143
153
`http://localhost:8080/`
144
154
@@ -176,6 +186,20 @@ Live preview:
176
186
177
187
`npm run build:static:report`
178
188
189
+
### Switching back to webpack
190
+
191
+
- Copy the contents of `_webpack` folder (except `README.md`) to the root of the project.
192
+
193
+
- Delete the `rspack.config.ts` file.
194
+
195
+
- Delete the `rspack` and `_webpack` folders.
196
+
197
+
- If you have a previous installation, clean the `node_modules` folder.
198
+
199
+
- Then install the packages:
200
+
201
+
`npm i`
202
+
179
203
### Updating packages
180
204
181
205
All packages in this project are pinned to latest versions at the time of publishing to exclude version-based conflicts and errors and to guarantee proper work of the code in this repository.
@@ -203,19 +227,43 @@ Vite is an excellent new generation bundler that could speed up your development
203
227
204
228
As for the speed: you can check this article - [Storybook Performance: Vite vs Webpack](https://storybook.js.org/blog/storybook-performance-from-webpack-to-vite/). As you can see - Webpack could still be fast enough. React Proto has such configurations. In `webpack\constants.ts` you can switch on SWC and Lazy Compilation.
205
229
206
-
Also, I'm looking forward to [Turbopack](https://turbo.build/pack) - the Rust-powered successor to Webpack. Now it is available only in Next.js, but I hope the future migration from the Wepback will be smooth because the principle of configuration should be the same.
230
+
Starting from version `2.0.0`, this project uses [Rspack](https://rspack.dev/) as the primary bundler. This bundler written in Rust and offers strong compatibility with the webpack ecosystem, so, performance should be much better ([rspack vs webpack](#rspack-vs-webpack)).
231
+
232
+
I'm also looking forward to [Turbopack](https://turbo.build/pack) — another Rust-powered successor to Webpack. Currently, it's available only in Next.js, but it might be released as a standalone CLI tool in the future.
233
+
234
+
### Rspack vs webpack
207
235
236
+
Rspack is a high performance JavaScript bundler written in Rust. It offers strong compatibility with the webpack ecosystem, allowing for seamless replacement of webpack, and provides lightning fast build speeds.
237
+
238
+
Here is a comparison between Rspack 1 with the built-in SWC loader and Webpack 5+ with the external SWC loader, while building the SSR version of the sample application on the same hardware configuration:
239
+
240
+
|| Rspack | webpack |
241
+
| ------- | --------- | -------- |
242
+
| Server | 5.35 s | 6.83 s |
243
+
| Client | 5.32 s | 7.50 s |
244
+
245
+
Of course, the larger the project, the greater the performance advantage. However, if you need more webpack compatibility or hot module reloading while developing with [Preact](#react-vs-preact), you can always [switch back to the webpack bundler](#switching-back-to-webpack).
246
+
247
+
Also, the optimization process of Rspack is currently slightly worse. Check the bundle size comparison for the non-SSR version of the sample application in this repository:
248
+
249
+
|| Rspack | webpack |
250
+
| ------- | --------- | -------- |
251
+
| Parsed | 284.47 KB | 262.9 KB |
252
+
| Gzipped | 90.29 KB | 86.84 KB |
208
253
### React vs Preact
209
254
210
255
In `webpack\constants.ts` you can choose to use [Preact](https://preactjs.com/) library instead React itself (`IS_PREACT` boolean constant).
211
256
212
-
Preact is a fast and compact React-compatible Virtual DOM library. But because its community is much smaller, you can face with some incompatibility with React API and functionality, especially with new ones. Also some tests show some frame drops during moving a lot of elements. Below you can see a bundle size comparison of no-SSR version of the sample application of this repository (according to Webpack Bundle Analyzer):
257
+
Preact is a fast and compact React-compatible Virtual DOM library. But because its community is much smaller, you can face with some incompatibility with React API and functionality, especially with new ones. Also some tests show some frame drops during moving a lot of elements. Below you can see a bundle size comparison of no-SSR version of the sample application of this repository that was built with Rspack (according to Webpack Bundle Analyzer):
213
258
214
259
|| React | Preact |
215
260
| ------- | --------- | -------- |
216
261
| Parsed | 262.9 KB | 150.55 KB |
217
262
| Gzipped | 86.84 KB | 52.09 KB |
218
263
264
+
**Important Note**
265
+
At the moment, the Rspack version of the project does not support hot module reloading during development with Preact. Compared to Webpack, it requires some additional tricky configuration, which I will probably add in the near future. However, if you need HMR (and you definitely do!), you can develop your project using React and then build it with Preact. Or just [switch your project back to the webpack](#switching-back-to-webpack).
266
+
219
267
### Why not any common i18n package?
220
268
You can freely integrate any React compatible i18n solution. But if React Proto already uses Redux and RTK, why just not use them for this task? Therefore, I have created a custom internationalization solution with a minimum additional code. It supports translations dynamic loading, server side rendering based on user acceptable languages, strict typing, etc. At the moment it just does not support string processing like pluralization, but it could easily be added later.
0 commit comments