search

angular-fullstack / generator-angular-fullstack

Yeoman generator for an Angular app with an Express server
https://awk34.gitbook.io/generator-angular-fullstack
6.12k stars 1.24k forks source link

Question about first page load speed. #2661

Open rollermy opened 7 years ago

rollermy commented 7 years ago
Item Version
generator-angular-fullstack 4.2.2
Node 8.1.2
npm 5.4.2
Operating System Ubuntu 17.10
Item Answer
Transpiler Babel
Markup HTML
CSS SCSS
Router ui-router
Client Tests Mocha
DB MongoDB
Auth Y

How can i improve first page load speed? The biggest file is the app.js at about 2.5mb. I have this gziped down to ~500k which is still pretty big. On a normal 3G connection it still taken 4-5 seconds to load the first time. Is this to be expected? Or am i missing something? Are there some tools or configurations that will work well with angular-fullstack that can help speed this up? Thanks!

Awk34 commented 7 years ago

I'm sure there's a bunch of things that could be done to improve first-load, but it hasn't been at the top of my priority list. I'd be happy to look over any PRs if you find some good solutions.

albert-92 commented 7 years ago

Did you run it in development environment? My app.js is also 2-3MB in dev env. However in production env it's usually < 1MB (probably even smaller after gziped), since all the comments and debug stuff are thrown out and it also gets minified.

nigel-dewar commented 6 years ago

Is it possible to use Server-Side pre-rendering with to solve this?

I've heard it has been pretty successful with react and angular2 projects to solve the first time page load time issue

AHHHH Never mind, the CANARY branch has server side rendering....

rollermy commented 6 years ago

I look forward to using the trying out the angular 4 generator too. A new install does have smaller files. But the app + vendor + polyfill is still ~800kb before adding anything and without gzip. I guess it could be smaller without bootstrap.

albert-92 commented 6 years ago

I found something that might help you.

Check your webpack.make.js and search for 

new webpack.optimize.UglifyJsPlugin({
    mangle: true,
    ...
})

If the mangle option is set to false, set it to true. This should reduce the app.js file size.