search

reduxjs / redux-devtools

DevTools for Redux with hot reloading, action replay, and customizable UI
http://youtube.com/watch?v=xsSnOQynTHs
MIT License
13.99k stars 1.16k forks source link

[chore]: improve build times #1011

Open FaberVitale opened 2 years ago

FaberVitale commented 2 years ago

redux-devtools is a humongous project and we should consider the use of esbuild or swc to speed up compilation time. We could use rollup-plugin-esbuild to generate the js bundle and rollup-plugin-dts to generate the ts types.

esbuild in other redux projects

reduxjs/toolkit uses esbuild to generate esm builds.

Methuselah96 commented 2 years ago

Note that the Webpack builds are by far the slowest. Specifically the extension build, the @redux-devtools/ui Storybook build, and the @redux-devtools/app Webpack builds take 80% of the build time, so we should focus on making those fast if we want to make any meaningful impact on the overall build time. I'm not sure what options we have for making the Storybook build faster.

FaberVitale commented 2 years ago

Note that the Webpack builds are by far the slowest. Specifically the extension build, the @redux-devtools/ui Storybook build, and the @redux-devtools/app Webpack builds take 80% of the build time, so we should focus on making those fast if we want to make any meaningful impact on the overall build time. I'm not sure what options we have for making the Storybook build faster.

@redux-devtools/app

Looking at the compiled code, packages/redux-devtools-app/build/web/js/app.js, it seems that it still uses regenator.runtime to handle async functions(browser support).

  1. Can we use a more recent compilation target?
  2. Is babel still necessary: isn't ts-loader good enough?

I'm not sure that it still makes sense for a development tool to target old browsers. Replacing Webpack with Vite (aka esbuild) could be viable solution.

Note that these suggestions are more than likely breaking changes.

markerikson commented 2 years ago

Yeah, my first take is that it's absolutely safe to use async code in browsers (especially given that we just shipped a major release here).

Methuselah96 commented 2 years ago 
1. Can we use a more recent compilation target?

I don't think that will make a significant difference in build time, but let's see how https://github.com/reduxjs/redux-devtools/pull/1017 does.

That being said, I don't think Babel is the largest bottleneck, I think Webpack is just really slow whether using Babel or not.

Methuselah96 commented 2 years ago

The build for @redux-devtools/app in https://github.com/reduxjs/redux-devtools/pull/1017 ended up being ~14 seconds faster. Not sure how much of that can be chalked up to build time variance, but I think we'll need bigger changes than that to consider making a change.