Fix and update Webpack build / Vendor chunking and overall compilation speed. (Question)

[consigliory]

Hi. First thanks for project. I have a question when do you plan to split vendor scripts ?

[michael-vasyliv]

Hello! Interested too, I have low computer and webpack builds scripts long, it builds base template about 60s for each side, (my project builds now 110s for each side (it has 6 pages, few lib (bootstrap.js, Tether, jquery)))

[MarkPieszak]

Tomorrow or Thursday I'll get them in there, this has been long overdue.
Really sorry about that, cross-country moves are brutal 👍

[JohnGalt1717]

When the vendor split, won't that cause tree shaking to have issues because it won't know if something is needed or not?

I have tree shaking working nicely, and I'd love to see the vendor split, but only if it's not going to break tree shaking in production. Hope you can make it all work together nicely :) (Might make sense to enable tree shaking with uglifyjsplugin at the same time you're doing this to make sure it works properly?)

[JohnGalt1717]

How's this coming? Anything I can take a look at?

[MarkPieszak]

Long weekend apologies, I was in the middle of it but didn't push anything up just yet.
Yeah I'll try to make it as good as possible for production builds

[LiverpoolOwen]

what kind of size are you getting your page load requests down to with tree shaking and AOT @JohnGalt1717 ?

[JohnGalt1717]

About 1/3rd the size of aot alone.

[JohnGalt1717]

Mark, thanks for all of the efforts. Enjoy the weekend. I look forward to what you create.

[MaklaCof]

Can someone clarify for me. Will this vendor split also speed up webpack --env.aot --env.client & webpack --env.aot --env.server command. Mine takes around 120 seconds and I run it very often. A few times per day, so it would be great if that someone answer is yes.

[yanbu0]

I ended up splitting out the vendor scripts and polyfills myself and it SIGNIFICANTLY increased build speed across the board. From upwards of 75 seconds sometimes to between 500ms and 2 seconds. This would be a great enhancement to see implemented "offically".

[JohnGalt1717]

@yanbu0 Any tips on how you went about it?

[yanbu0]

I don't really have it working as well as I would like yet. Still some weird stuff going on with AoT and server side builds occasionally where it takes forever and a day to build still. I'm probably going to have to buckle down and do a webpack deep dive at some point this week or next to get this all straightened out, its driving me nuts, haha.

[MarkPieszak]

Sorry guys I haven't had much time recently but I'll get a much better webpack build in there as soon as I have a few hours 😓

[JohnGalt1717]

Hi @MarkPieszak we're really looking forward to it here. It's killing us both in development and then in production publishes where it's taking upwards of 16 minutes with AOT alone which is just brutal waiting for deploys.

[kyse]

Can't wait. Still trying to wrap my head around vendor splitting and tree shaking and compatibility between the two. I've been reading vendor splitting (chunking?) breaks tree shaking.

Then there's the babel loaders concept. I guess ngtools/webpack converts ts -> babel converts it into whatever we desire?

But yea, I'd definitely like to be able to add in some vendor bundles and get rid of the cdn's, without killing build performance. Especially for development with HMR without waiting however many seconds each time.

Also curious about scss. Are we able to tree shake unused imports from SCSS? For example, I created a custom class in scss utilizing bootstrap's breakpoint mixins to switch a nav-tabs to a nav-pills at a certain breakpoint. I noticed when using webpack-bundle-analyzer the resulting scss file is insanely huge, obviously because I imported bootstrap scss.

[phl3x0r]

Any updates on this?

[Vasanth19]

Great Work @MarkPieszak Thanks for this template. I am very much looking for this update as well for vendor splitting. Did you get a chance to work on it?

[consigliory]

@MarkPieszak any updates on this?

[JohnGalt1717]

FYI I've done extensive work on it, and if I can get one bug fixed to allow @ngtools to generate the chunks for lazy loading I'll do a pull request. It makes a WORLD of difference especially at design time.

Two things that I'd love to see but can't figure out if it's even possible:

1. (s/l)css for the application that isn't embedded in the javascript like vendor.css is separate. Chunk (s/l)css files with the chunks for lazy loading. This would be the holly grail. Then the javascript doesn't have to load to have styling so you don't get weird flashes AND it only loads what it needs. The vendor.css that I already have works great and makes a major improvement but more would be better.
2. Second shake of vendor.js. I want to be able to point rollup or something at vendor.js after it's built and have it take the application .js code and all chunks and drop everything from vendor.js for production that isn't actually used in the application, not just the stuff that isn't used in the vendor packages. It would probably cut 40-50% off the vendor file.
3. Tree shaking doesn't really work like it should in most cases (works better in the vendor.js) because of bugs in uglify. I want to convert it to use rollup or use intermediate and babel after uglify to work around the bug. Probably 20-30% size savings available on top of Showcase NgRx  #2.

[kyse]

Can you detail your setup for vendor splitting the js? Still having trouble getting this to work.

[AlexLubinski]

Hi guys!

I've done an upgrade of webpack - "webpack": "3.0.0".

Also, webpack-sources was added in our project - "webpack-sources": "1.0.1". (I'm not sure that everyone needs this, but without it, an error appeared in our project)

And the project rebuild became faster. Approximately acceleration was about 30 percent.

[JohnGalt1717]

That's great news! If I get time this week I'm going to split out the production and development build so that the production one doesn't use vendor splitting but the development build does so that production will use AOT. I'll have it split the CSS out but roll everything else together which should solve the white flash on load as well.

[MarkPieszak]

I spent some time the other day getting getting awesome-typescript-loader (& friends) back in for the Dev builds, those sped up tremendously, now just running into the same exact issues John has seen as well with vendor splitting & AoT builds. I've been able to get it working when just combining the vendor & main files into 1 for prod/aot builds, but as soon as you try splitting out vendor into a separate file you see the errors.

Now that the holiday is over, I'm hoping to sync up with a few guys from the Angular team this week and see if there's any way to get vendor splitting in there.

@JohnGalt1717 Know this one has been driving you crazy, it'll all be over with soon enough 😄

[JohnGalt1717]

@MarkPieszak Thanks for the work!

So I've tried a few other things in the mean time:

1. I created a production build process that uses @ng/tools and doesn't vendor split (and check for isDevelopment in the view to determine if the css/js for vendor should be added). This works and the lazy loading again works in this process as does AOT. It is BRUTALLY slow (20+ minutes to build just like the current code base if you get any large sized app) and still doesn't do tree shaking properly because of all of the bugs in webpack and uglify.
2. I started experimenting with fuse.js which has come a long way in a short period and has all of this stuff working and is VERY fast and does tree shaking that's better than rollup and Uglify. I haven't had time to come back to it but they have a VERY complete example on their site.
3. I've found a sample that in production creates ES2015 modules from typescript, uses uglify to tree shake them and then uses babel to convert that down to commonjs based ES5. Wow what a hack but it appears it may work.

Ultimately I'm really disappointed in the Angular stack at this point. This is beta quality stuff that just doesn't work, is brutally slow and creates bloated solutions because none of the promises of angular actually work. And this has nothing to do with your code here @MarkPieszak. It's Angular and worse the comments in all of the endless bugs to do with this stuff are completely lax and dismissive of the MAJOR issues there are.

In a real programming language I can build millions of lines of code in seconds and it links and compiles down to a tiny amount of actual code. (i.e. our website also has a Windows 7 desktop application that is 305k versus 14 megs for the web app (including the same images) and takes 5 seconds to build, link and publish EVERYTHING versus over 20 MINUTES for Angular) Angular needs to get there yesterday or lesser frameworks like vuejs, React and Aurelia are going to eat Angular's breakfast. (to say nothing of Steve Sanderson's bomb he dropped with Blazor)

At this point screwing around for 6 months with all of these issues that are STILL issues and the brutally complex build systems that are complex for no reason I would never start another Angular project at this point and would strongly advise companies to STAY AWAY until and unless someone comes up with a system that JUST WORKS and does so in a way that is performant. (i.e. knockout plus jquery and mvc.net is still just as performant as Angular 2+, has none of the issues and developers can be immediately productive without having to wait for endless build/compile cycles and it's ancient.)

Sorry for the rant. I just looked up our productivity data yesterday for Angular 2 versus Angular 1 and before that knockoutjs and wow. I wasted 2 developers on a team of 4 effectively with the drop in productivity care of Angular 2 and it wasn't because they don't know how to use it, it's because the platform is broken)

[MarkPieszak]

John I'm sorry that things have been frustrating, and we've all been there.
Doing isomorphic javascript (regardless of framework / or even vanilla JS) is a massive undertaking and isn't easy no matter how you slice it.

I will try my best to get some of the issues pushed, such as:

• vendor splitting in combination with the AoT plugin not working

Do you have a repo where I can see 20 minute AoT prod builds? There must be some kind of a near infinite loop going on that's causing that. They typically take 30-60 seconds, even with larger applications.

The problem with comparing JavaScriptService (or this repo as well) that are using Angular (2+)
with AngularJS (1.x), or even with Aspnet+Jquery/Knockout projects is that there aren't many similarities. None of those other options offer universal rendering of your JS written application, no SEO, no social media deep-linking, etc.
Universal issues such as re-using responses / caching / authentication during SSR / passing credentials to the client and reusing them, these are all common isomorphic problems regardless of framework, and I know, they can be a total headache sometimes...

Anyway we'll figure it all out, that's why we're all here. To make this integration better and better!
🍻

[JohnGalt1717]

The git issues for Angular CLI and AOT has a bug already filed on the INCREDIBLY long compile times.

I was using Angular 1 and Knockout as examples of the past. But React has none of these problems for instance. (NativeScript also has all of these problems but ReactNative doesn't... react just has a long list of OTHER annoyances that apparently the script kiddies on Mac that never learned how to use real programming languages think is the normal way things are done, but I digress...)

Angular needs to build a linker and compiler that can do incremental builds and keeps symbol files etc. These problems won't go away until then... and honestly Webpack is ill suited for what Angular needs to become. It's a mess of hacks and shims.

(i.e. even after vendor splitting if you change any file in the actual project the entire rest of your code gets rebuilt by HMR. It obviously shouldn't. Only the chunk that that part is in should get rebuilt at the very least, and production builds should be incremental and take a few seconds as should compile on initial run of the site because it should be using incremental build patterns that have been around for decades)

[isaacrlevin]

Any update on this, I would love to be splitting up my vendor files.

[JohnGalt1717]

@isaac2004 I posted my code in the other vendor splitting issue.

[isaacrlevin]

@JohnGalt1717 thanks I will take a look. Bummer that the tooling for all this isn't baked yet

Sent from my Samsung SM-G955U using FastHub