4 ms·

I’d like to see non-CRA numbers: I’ve found that a simple React + Webpack 5 project is not as bad to get off the ground as it used to be.

amasad 6y ago
I'm sure it's less disk space because it has less deps but the most of the RAM and CPU usage in CRA is Webpack so I'd be surprised if that changed much.
- fiddlerwoaroof 6y ago
  I’d like to see the numbers: the webpack config CRA eject gives you is a monster.
- mumphster 6y ago
  webpack AND all the extra plugins and preprocessing and postprocessing CRA adds -- its not a small webpack setup by any means and you can get 1s build times with webpack pretty easily without CRA
  - bavell 6y ago
    Agreed, I use webpack for small and medium projects and it's basically instant. I use TS but not the compiler - I tell babel to strip types and use just a few plugins, transforms and loaders. I'm not in love but it's a core tool in almost all of my projects, personal and professional.
wildpeaks 6y ago
Exactly: 99% of the time, "webpack is slow" is just code for "I have Babel in my toolchain" and forgetting to set ts-loader as "transpile only". Personally I removed it years ago, and Webpack 5 even allowed me to get rid of more loaders now that there are Assets Modules that automatically detect assets and webworkers using the "new URL()" syntax, and Typescript does everything else I need.
- fiddlerwoaroof 6y ago
  The new URL() thing is amazing
  - netghost 6y ago
    Can someone clarify what the new URL() thing is?
    - __s 6y ago
      https://webpack.js.org/guides/asset-modules https://webpack.js.org/guides/asset-modules
    - fiddlerwoaroof 6y ago
      this is the release notes for it: https://webpack.js.org/blog/2020-10-10-webpack-5-release/#asset-modules https://webpack.js.org/blog/2020-10-10-webpack-5-release/#as...
- joshxyz 6y ago
  I can remove babel in my code?
  - fiddlerwoaroof 6y ago
    It depends on your target platform: ES6 modules are basically supported in every browser I care about, so the major reason for Babel is JSX
    - inbx0 6y ago
      Even if your target platform didn't have ES6 modules, Babel is probably not the tool you'd want to transpile those with. Let the bundler (which is the topic of the discussion here so I assume a bundler is used) handle them. Tree shaking works better that way anyway. Also if JSX or similar JS extensions are the only thing you need tramspiling for, you might want to look at Sucrase [1] as a fast alternative to Babel. https://github.com/alangpierce/sucrase https://github.com/alangpierce/sucrase
RobertKerans 6y ago
Yep, I needed to put together a Webpack build tool chain for React last month & thought it was going to be a bit of a nightmare and it just...wasn't. Tiny bit of fiddling, but generally easy -- that was with a fairly complex setup in terms of the project structure and rules around deployment, so quite impressed after a few years of avoiding it due to how much I hated the song and dance over setting it up.

amasad 6y ago

I'm sure it's less disk space because it has less deps but the most of the RAM and CPU usage in CRA is Webpack so I'd be surprised if that changed much.

fiddlerwoaroof 6y ago
I’d like to see the numbers: the webpack config CRA eject gives you is a monster.
mumphster 6y ago
webpack AND all the extra plugins and preprocessing and postprocessing CRA adds -- its not a small webpack setup by any means and you can get 1s build times with webpack pretty easily without CRA
- bavell 6y ago
  Agreed, I use webpack for small and medium projects and it's basically instant. I use TS but not the compiler - I tell babel to strip types and use just a few plugins, transforms and loaders. I'm not in love but it's a core tool in almost all of my projects, personal and professional.

wildpeaks 6y ago

Exactly: 99% of the time, "webpack is slow" is just code for "I have Babel in my toolchain" and forgetting to set ts-loader as "transpile only". Personally I removed it years ago, and Webpack 5 even allowed me to get rid of more loaders now that there are Assets Modules that automatically detect assets and webworkers using the "new URL()" syntax, and Typescript does everything else I need.

fiddlerwoaroof 6y ago
The new URL() thing is amazing
- netghost 6y ago
  Can someone clarify what the new URL() thing is?
  - __s 6y ago
    https://webpack.js.org/guides/asset-modules https://webpack.js.org/guides/asset-modules
  - fiddlerwoaroof 6y ago
    this is the release notes for it: https://webpack.js.org/blog/2020-10-10-webpack-5-release/#asset-modules https://webpack.js.org/blog/2020-10-10-webpack-5-release/#as...
joshxyz 6y ago
I can remove babel in my code?
- fiddlerwoaroof 6y ago
  It depends on your target platform: ES6 modules are basically supported in every browser I care about, so the major reason for Babel is JSX
  - inbx0 6y ago
    Even if your target platform didn't have ES6 modules, Babel is probably not the tool you'd want to transpile those with. Let the bundler (which is the topic of the discussion here so I assume a bundler is used) handle them. Tree shaking works better that way anyway. Also if JSX or similar JS extensions are the only thing you need tramspiling for, you might want to look at Sucrase [1] as a fast alternative to Babel. https://github.com/alangpierce/sucrase https://github.com/alangpierce/sucrase

RobertKerans 6y ago

Yep, I needed to put together a Webpack build tool chain for React last month & thought it was going to be a bit of a nightmare and it just...wasn't. Tiny bit of fiddling, but generally easy -- that was with a fairly complex setup in terms of the project structure and rules around deployment, so quite impressed after a few years of avoiding it due to how much I hated the song and dance over setting it up.