Closed brgaulin closed 8 years ago
Hi @brgaulin, thanks for your note.
The vendor.js size does seem a little large. We may be able to tweak webpack to bring it down a bit. webpack -p
(which applies default UglifyJS settings) brings vendor.js down to 763 kB but breaks Angular2...
So currently we're using
new webpack.optimize.UglifyJsPlugin({
mangle: false,
compress: {
warnings: false
}
})
@SethDavenport Good catch on that angular issue, I guess it is still beta ;) But I used a few other methods of getting angular down with webpack, and it seems that the lowest I could get it was about 800kb, which is still just huge for vendor files lol, but that seems to be the standard size. I'm just trying to picture a phone execute that much JS without melting lol
@brgaulin I'd be interested in those methods if you're willing to share them :)
I think it was
beautify: false
mangle: false
compress: {
screw_ie8: true
},
comments: false
Thanks @brgaulin - what ended up working the best for me was
const prodPlugins = [
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.optimize.DedupePlugin(),
new webpack.optimize.UglifyJsPlugin({
mangle: {
keep_fnames: true
},
compress: {
warnings: false
}
})
];
(thanks to @gdi2290 for his comment here: https://github.com/angular/angular/issues/6501#issuecomment-204153859).
This, plus rejigging a couple of things in the vendor
section gets it down to:
Hash: 72373d9bb9635c0be9c1
Version: webpack 1.12.14
Time: 18352ms
Asset Size Chunks Chunk Names
vendor.72373d9bb9635c0be9c1.bundle.js 679 kB 0 [emitted] vendor
app.72373d9bb9635c0be9c1.js 245 kB 1 [emitted] app
shims.72373d9bb9635c0be9c1.js 100 kB 2 [emitted] shims
vendor.72373d9bb9635c0be9c1.js.map 11 MB 0 [emitted] vendor
app.72373d9bb9635c0be9c1.js.map 2.33 MB 1 [emitted] app
shims.72373d9bb9635c0be9c1.js.map 764 kB 2 [emitted] shims
index.html 536 bytes [emitted]
Vendor.js
is pretty much just Angular2 stuff at this point and is 679 KB. Interestingly my node_modules/angular2/bundles/angular2.min.js
clocks in at 589 KB.
So Angular2 seems to consume the lion's share, and it looks like we can shave off another 90 kB max.
I can look to drop some other libs from the app, but the other stuff I think is mostly redux/immutable and friends.
My colleague @sumitarora is working on a more minimal angular starter (no redux) so we can see where that lands.
Ya, My main concern is, even though we can keep minifying, all that JS is still there executing in the browser lol. I think I'll wait for angular2 to hopefully clean this up before release? I know the team has been pushing mobile pretty hard, but when you have unmangled code that is ~1MB, that is just too much lol
Switching to another setup for this project, and crossing my fingers that the next project angular2 will be ready =)
Thanks for the help @SethDavenport !
np - the hazards of Beta I guess. Might not work for you, but our Angular1 starter is set up with typescript and some sugar to make it use a similar component model to ng2. Its size is a lot smaller:
Version: webpack 1.12.14
Time: 16876ms
Asset Size Chunks Chunk Names
vendor.6e3b0d2ee75a0d4e92c9.js 323 kB 0 [emitted] vendor
app.6e3b0d2ee75a0d4e92c9.js 91.9 kB 1 [emitted] app
vendor.6e3b0d2ee75a0d4e92c9.js.map 3.92 MB 0 [emitted] vendor
app.6e3b0d2ee75a0d4e92c9.js.map 824 kB 1 [emitted] app
index.html 497 bytes [emitted]
The claims I have been seeing, is that angular2 is focusing on being lighterweight on mobile, which I hope involves filesize being the same or smaller =P
I will probably end up falling back to angular1 for now. But ya, in this case, beta really means beta =P I can't wait for that stuff to launch though. Looks good.
And thanks @SethDavenport and rangle for your awesome youtube tutorials/overviews/coverage on Angular2. They are awesome!
When doing a clean build of the ng2 redux repo, the filesize is 1.5MB, was wondering if that was expected? I'm trying to dig down to why webpack has it built so large, it claims angular is 5MB before it gets minified.
I may end up going with a more baremetal angular2 setup since I'm trying for a mobile app, but was wondering what the thoughts were from the rangle team =)
Result from npm run build