Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Long build times for SPFx projects with many components #3355

Open
vman opened this issue Jan 30, 2019 · 9 comments

Comments

@vman
Copy link
Contributor

commented Jan 30, 2019

Category

  • Question
  • Typo
  • Bug
  • Additional article idea

Expected or Desired Behavior

When developing/testing using gulp serve for large SPFx projects (more than 25 webparts and extensions), only the changed files should be built using webpack.

Observed Behavior

For large SPFx projects (including the SharePoint starter kit) where there are a large number of components, with every code change it takes about 25 seconds for webpack to build the new bundle.

image

This means even if we modify a single line of code, we have to wait for webpack to build the entire bundle with all the components.

I have seen this issue is mainly because SPFx adds each component by default as a separate bundle: https://github.com/SharePoint/sp-starter-kit/blob/master/solution/config/config.json

If I move all components to a single bundle, the build time is reduced considerably. But then we have the issue of having all components in a single bundle and code might be loaded on the page even if it's not needed.

Steps to Reproduce

  1. Clone the SP Starter Kit repo
  2. npm install
  3. gulp serve
  4. Observe that it takes about 25 secs for webpack to build the bundle
  5. Change a line of code in any webpart and save
  6. Observe that again it takes about 25 secs for webpack to build the bundle
@StfBauer

This comment has been minimized.

Copy link
Contributor

commented Jan 30, 2019

Sometimes not only many components are required to slow down the build performance. I already mentioned in #2885
I also did some further observations and there are three critical components causing the performance drain:

  • TypeScript compiler
  • TSLint
  • WebPack

It also seems like that everytime a new build runs the whole gulp build rig get initialised like you would start gulp serve fresh. Instead of having a persistent base configuration and adapt to changes in the source code.

@vman vman changed the title Large build times for SPFx projects with many components Long build times for SPFx projects with many components Jan 30, 2019
@ssvinciak ssvinciak referenced this issue Mar 4, 2019
2 of 4 tasks complete
@effectivetom

This comment has been minimized.

Copy link

commented Apr 17, 2019

Has anyone experimented with fork-ts-checker-webpack-plugin, thread-loader or other third party tools?

I've seen them improve the performance of other webpack based projects but don't have the required expertise to integrate them with an SPFx project.

@ravinleague

This comment has been minimized.

Copy link

commented Aug 6, 2019

Is there an update on this issue ?

@vman

This comment has been minimized.

Copy link
Contributor Author

commented Aug 6, 2019

@ravinleague I am expecting webpack 4 which is part of the next SPFx version (1.9.1) should help in speeding up the build times. The next SPFx version should be out in early august as mentioned in a recent PnP call.

@campuslane

This comment has been minimized.

Copy link

commented Aug 19, 2019

I have this same problem with extremely long build times (even for the simple SPFX Hello World webpart with no modifications). I just tried the recently released 1.9.1 version and it didn't seem to improve the performance. It still takes a really long time, and makes SPFX web part development inefficient and a real pain.

@alirobe

This comment has been minimized.

Copy link

commented Aug 28, 2019

Try this:

build.configureWebpack.mergeConfig({
    additionalConfiguration: generatedConfiguration => {
        if (generatedConfiguration.optimization) {
            generatedConfiguration.optimization.minimizer[0].options.parallel = true;
        }
        return generatedConfiguration;
    }
})

In the gulpfile for your project. (Tested on 1.9.1 / webpack 4). It'll at least paralellize the problem. The current config just maxes out a single core...

@aronbardsley

This comment has been minimized.

Copy link

commented Sep 18, 2019

Hi All,

I'm also having issues with this. I would expect gulp serve to do incremental compilation on changed ts files only - instead of re-compiling/packaging the entire project each time. This would at least speed up the development process (I don't mind waiting minutes for a release build, but not for dev...)

@ravinleague

This comment has been minimized.

Copy link

commented Sep 18, 2019

@s-KaiNet

This comment has been minimized.

Copy link
Contributor

commented Sep 18, 2019

You can try to apply some hints to improve the performance of serve from my article here.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
10 participants
You can’t perform that action at this time.