Move fomantic and jQuery to main webpack bundle

[silverwind]

This saves around 3 MB binary size by not including useless fomantic files in the build. Also, this allows us to move jQuery into the main bundle as well which eliminates a few HTTP requests.

Also included are webpack config changes:

• split less and css loaders to speed up compliation
• enable css sourcemaps
• switch css minfier plugin to cssnano-webpack-plugin which works better for sourcemaps than the previous plugin

[silverwind]

Overall, this seems to actually decrease webpack build time because of the split up of the CSS loaders. BTW, to get the binary size reduction, one has to manually delete public/fomantic.

[lunny]

But the index.js and index.css will be bigger than before? It will spend more time on user first visit.

[silverwind]

The index chunk will be bigger but the downloaded JS/CSS before page is ready is the same because we depend on jquery/fomantic in a render-blocking way. Overall size might even be a bit smaller because polyfills are added to each chunk (around 30kB of JS per chunk) and we get less of that with less chunks. Essentially,

<script src="index.js"></script>

is the same or faster than the previous:

<script src="jquery.js"></script>
<script src="semantic.min.js"></script>
<script src="index.js"></script>

[silverwind]

Another nice benefit here is that we avoid unnecessary CSS reflows when the stylesheets load in because they now apply all at once.

[lunny]

CI failed

[silverwind]

Failure at TestToUTF8WithFallback is unrelated.

[CirnoT]

The CSS source-map issue seems to persist even with these changes, our Webpack config seems to refuse to create them

[CirnoT]

For what it's worth, we should most likely also provide sourcemaps for other resources for easier debugging stuff like Monaco or Service Worker.

[silverwind]

Maybe it's because only js/index.js is whitelisted for sourcemap generation.

So far I've only had it enabled for the index chunk because source maps do blow up binary size considerably and for CSS, I'm not sure of their benefit but I guess it now gets more imporant with fomantic bundled in.

[CirnoT]

I can't get it working even with explicit SourceMapDevToolPlugin removed and devtool set to source-map which normally generates all sourcemaps for everything else.

[silverwind]

For what it's worth, we should most likely also provide sourcemaps for other resources for easier debugging stuff like Monaco or Service Worker.

Serviceworker I agree but huge dependencies Like Monaco, I don't. Those would be like 20mb source map with questionable benefit.

[silverwind]

index.css source map added in db7f857, give it a try.

[CirnoT]

Serviceworker I agree but huge dependencies Like Monaco, I don't. Those would be like 20mb source map with questionable benefit.

Do it for development only? Certainly it's huge but without it debugging issues with Monaco might be hard.

[CirnoT]

I don't see sourcemap generated for CSS nor does Firefox or Chromium load one.

[silverwind]

It works for me:

             css/index.css  1000 KiB            index  [emitted]        index
         css/index.css.map  1.33 MiB            index  [emitted] [dev]  index

In Chrome I see some filenames:

Certainly it's huge but without it debugging issues with Monaco might be hard

I guess generally we don't need to debug our dependencies and I'm not eager to slow down development build time even more (it's already quite slow, currently 21s for me, goes to 25s with all maps enabled).

[CirnoT]

Are you sure you don't have any local changes? It refuses to create map for CSS files for me no matter what.

[CirnoT]

Weird, It seems to create it on watch-frontend but not on frontend?

[silverwind]

Yes, just checked in a fresh clone. Try make clean-all && rm -rf node_modules.

[silverwind]

Ah, apparently I get a CSS sourcemap on watch-frontend but not on frontend, strange.

[CirnoT]

Yes, just checked in a fresh clone. Try make clean-all && rm -rf node_modules.

Done and still happens only on watch-frontend

[silverwind]

Apparently it's NMFR/optimize-css-assets-webpack-plugin#53 (comment). When I set this, it outputs source maps for all CSS files and completely seems to disregard the SourceMapDevToolPlugin's include option.

BTW, I removed the serviceworker map again, it's like 10 lines of our own source code and 99% workbox code and I don't see a reason to reserve another username for that.

[silverwind]

Fixed CSS sourcemaps by using cssnano-webpack-plugin which looks to better integrate with SourceMapDevToolPlugin.

Also included is a fix that prevents unnecessary fomantic rebuilds when package-lock.json changes. Instead, it now only rebuilds when semantic.json changes (which we will always update when updating fomantic).

[silverwind]

Squashed and update commit title and message.

[techknowlogick]

ping LG-TM