Tree Shaking?

[JohnGalt1717]

Right now it appears that while this is doing AOT it isn't doing tree shaking (i.e. UglifyJsPlugin isn't enabled).

Is there any intent to add it? (I've added it manually at this point and it really shrinks files)

[MarkPieszak]

Hey John without a doubt, the webpack build system in general needs some love.
We need to add Vendor & Polyfill chunking/splitting as well as add some better tree shaking, uglify, rollup and gzip would be great to have for Prod builds.

If there's anything you want to make a PR on that would help people already, that'd be great!

[JohnGalt1717]

Ok, well here's what I did for tree shaking. Tell me what you think:

In the webpack.prod.js I added this:

var webpack = require('webpack');

module.exports = {
plugins: [
new webpack.optimize.UglifyJsPlugin({
compress: {
drop_console: true,
dead_code: true,
drop_debugger: true,
},
mangle: {
// Skip mangling these
except: ['$super', '$', 'exports', 'require']
},
output: {
comments: false
}
})
]
};

and then in webpack.config.js I added this around line 29:

if (options.client && (options.prod || webpackOptions.prod)) {
    console.log('Use Client-side Production Deploy (tree shaking)');
    clientConfig = webpackMerge({}, clientConfig, prodPartial);
}

And then I updated the .csproj to have env.prod=true

Obviously it would be better if it only set env.prod=true if dotnet publish was set with -c Release

[hheexx]

I think your config changes nothing. Those are mostly defaults.
AFAIK tree shaking is broken currently for trypescript. It will be fixed in future webpack version.

[JohnGalt1717]

@hheexx I'm definitely seeing a difference and you have to have uglify installed with the right branch and the plugin enabled. In package.json I have this in devDependencies:

"uglify-js": "git://github.com/mishoo/UglifyJS2.git#harmony",
"uglifyjs-webpack-plugin": "^0.4.3"

This makes tree shaking work with webpack and typescript properly unlike the default version that is indeed broken.

[hheexx]

Does not work for me.
Do I have to reference that new uglifyjs from webpack or it uses new version just by including it in packages?

[JohnGalt1717]

Add the lines above to your package.json and then follow my instructions from 13 days ago and then build with the new flag on webpack and it will enable it and work.

Right now uglify isn't included at all and thus tree shaking can't happen so this definitely does work. You'll also see that the code generated is minified unlike the default too.

[hheexx]

I have Uglify plugin included. I tried with your params and without params and it does not work.
There is small file size difference but I think it's mostly because of output: { comments: false }

[JohnGalt1717]

You must have the exact version that I have above of the uglify plugin otherwise it won't work and treeshaking is disabled automatically because of issues that that version fixes in typescript as you noted. And it must be done after AOT is complete otherwise it will do nothing because it can't tree shake HTML so it has to include everything.

[hheexx]

I did c/p of your versions.
My plugin order is:
ContextReplacementPlugin
aotPlugin
UglifyJsPlugin

[chrisvfabio]

Works for me. Thanks!

Before:

After:

Should tree-shaking be applied to main-server.js? The file size is 19.2mb... Or would vendor splitting help reduce the size?

[JohnGalt1717]

In development if you have your webpack.config file set properly for target node this will be TINY because it will only be your code and it doesn't have to do a vendor rebuild.

For production you'll want to tree shake and AOT it just like the browser because all of the vendor stuff has to be loaded in because node_modules doesn't exist.

Vendor splitting is only for development to speed up HMR rebuilds so they don't take ages.

However in production there are things that you do want:

1. Vendor css should be bundled separately and linked at the top of your so that all of the styling is applied before the page displays so that users don't get horrible views. (this is easy with the code I've done so far)
2. Your application root styling should be loaded so that your base styling is loaded before the JS but not lazy loaded bundle css. (I can make it load ALL css but not the lazy loaded bundles at this point)
3. vendor.js gets loaded and then yours at the bottom of the page. Because it's 2 requests and with CSS possibly 4 with http instead of http/2 you're still under the limit and it should load simultaneously.

With all but the lazy loaded css we're down to under 1 second to load everything for a site that in development is 35 megs of chunks etc plus vendor. (yes it's a BIG site)

Once ng/tools is fixed to work with webdll.plugin and loads the chunks properly we should be able to get that down even lower and faster with AOT.

[isaacrlevin]

@JohnGalt1717 do you have a sample repo of your prod configs. I would be curious to see it.

[JustasKuizinas]

@JohnGalt1717 would be interesting to see your configs

[peterdobson]

@JohnGalt1717 I'd be very interested too!