Which is top performance giver and Is there any specific advantage of webpack over react-scripts build?

CodePudding user response：

Both are not fast enough when Compared to Snowpack or Vite. I don't know why react-script popular. React Script is actually using Webpack under the hoods.

CodePudding user response：

To start with, CRA (create-react-app) uses Webpack under the hood. What it does is it provides ready-to-use configuration supporting tree-shaking, code splitting, static resource importing (ie. JSON files or images). It also includes several additional testing/code quality tools like jest and eslint. Those are also preconfigured and ready to be used.

On the other hand, when you decide to use Webpack directly you must prepare this configuration by hand and, what's worse, maintain it to preserve compatibility with newer versions of React and other libraries. It may seem easy, but it's not. There are multiple factors, which must be taken into consideration.

Now, in terms of performance, as we all know Webpack isn't blazing fast. There are alternatives available, but many of them aren't production ready yet. To mention few: SWC (spack), ESBuild, Vite, Snowpack. However, if you have access to Webpack's configuration you may replace babel-loader with swc-loader or similar and gain some performance. See this article for details.

Let's say you use CRA - does it mean there is no way to modify Webpack's configuration? Fortunately, there is! One can use craco and apply desired modifications through it.

To sum up:
CRA - preconfigured, production-ready Webpack, jest, eslint etc.
Webpack - must be configured by hand and maintained to stay compatible with newer React versions. No additional toolset included (jest, eslint).