Long build times for SPFx projects with many components

[vman]

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.

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]

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.

[effectivetom]

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]

Is there an update on this issue ?

[vman]

@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.

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]

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]

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...)