build: speed up webpack build using HardSource for caching

[chrismwendt]

https://github.com/mzgoddard/hard-source-webpack-plugin

HardSource caches modules in .cache/ and cuts down the build time:

• Initial build: 55s down to 15s 🚤💨
• Incremental build: 10s down to 7s (based on light empirical evidence)

Here's what the output looks like 👀:

[hardsource:57550c93] Using 69 MB of disk space.
[hardsource:57550c93] Tracking node dependencies with: package-lock.json.
[hardsource:57550c93] Reading from cache 57550c93...
[16:36:53] › …  awaiting  Compiling...
...

Unfortunately, I ran into the same issue reported here ☹️ mzgoddard/hard-source-webpack-plugin#416 and I avoided it by removing node-sass-import-once and dropping the .css extension on some SASS imports. What's left are some deprecation warnings that will be dropped soon sass/node-sass#2362 (comment) These deprecation warnings can be ignored 🙈:

DEPRECATION WARNING on line 4, column 8 of /Users/chrismwendt/sourcegraph/browser-extensions/app/extensions-client-common.scss:
Including .css files with @import is non-standard behaviour which will be removed in future versions of LibSass.
Use a custom importer to maintain this behaviour. Check your implementations documentation on how to create a custom importer.
...

[felixfbecker]

This is awesome!

and I avoided it by removing node-sass-import-once

sass-import-once is there for a reason though - otherwise Sass imports don't work like TS imports where a module is only included once. Every file or library that imports the same file will actually bring in that file another time into the bundle, but every file or dependency should be able to e.g. declare a dependency on bootstrap without bringing Bootstrap multiple times. This is not just a size concern, as the order in which CSS is defined matters.

[chrismwendt]

I see, the removal of node-sass-import-once breaks the CSS:

This shouldn't be a problem if/when we switch from SASS to some CSS-in-JS solution (e.g. aphrodite). Unless there's a way to fix this sooner, let's table HardSource until then.

[felixfbecker]

This shouldn't be a problem if/when we switch from SASS to some CSS-in-JS solution (e.g. aphrodite)

FYI we used CSS-in-JS for components at some point but there were a lot of problems with it, so we switched to using Sass. I don't think this bug is compelling enough reason to switch everything back, but always open to discuss.

[chrismwendt]

Is there any other way to organize SASS imports? If not, we'll have to wait for HardSource to provide an answer to mzgoddard/hard-source-webpack-plugin#416

[felixfbecker]

I don't know, I would not think so. I would recommend you post a comment on that thread saying that you identified this only happens with sass-import-once, because I don't see it mentioned in the thread.

The build of the browser-extension is not very optimized. I think there are other ways we can speed it up we can also try.