can anybody help me?
My Angular 2 application is taking a long time to initialize.
There are only 16 requests.
And despite the relatively high size of 3 mb, the problem is not to bring the files.
I'm referring to the time after getting all files.
On my notebook are 3 to 4 seconds, which I believe is a high time since I have only 10 components, 1 pipe, and 6 directives for now.
The idea is that the application has close to 200 components.
Then I will create lazy loading.
But for 10 components I think it should be faster.
On the cell phone the standby time reaches 10, 12 seconds.
On the iPad the wait is relatively large as well.
Above 15 seconds.
I am using webpack, minifying css and js.
Even using pre-render on the server (asp.net core).
This delay occurs after all files are downloaded.
That is, it is an angular 2 processing time to render the screen.
What else could I do?
What could I have done wrong?
The test link:
http://projetos.codegenerator.com.br/angular2/
Thanks.
I think you are not using any bundle tools like webpack, systemjs..
When you deploy your ng2-app, you should use AOT(ahead of time) compile.
I guess you are using JIT(just in time) compile.
In angular2 guide page,
With AOT, the browser downloads a pre-compiled version of the application. The browser loads executable code so it can render the application immediately, without waiting to compile the app first.
When you use JIT compile, your browser will download vendor.js which is defined by angular2 compiler and it will compile your app just in time. It will be too slow and your client have to download vendor file. When you use AOT, you dont have to use vendor file, so resources are being smaller.
I recommend to use AOT compile when you deploy your app, and use lazy loading for resource size.
If you are curious about ng2 AOT compile, read this guide.
angualar2-cookbook-AOT
And here is example angular2 app with webpack2 and lazy load.
use file structure and config files in here.
When I tested with example app, files bundled with aot was smaller than 500KB.
angular2-webpack2-aot
Angular 2 is well tested for its performance, If there is anything lagging its on the application and its dependencies..
Check your environment, If there are only few component then there is nothing wrong on the framework side.
Webpack or any other build tools has nothing to do with the performance , coz they are development dependencies,
If you are using cdn's for some third party services or libraries, check whether their services are on time.
I finally got the performance I wanted in the application.
It took a bit of work but really worth it.
Configure your application to compile in AOT, really the performance gain is worth it.
Related
For development purposes I need to have a better separation of my frontend from my backend.
We have an application built using Vaadin 8, and currently we are experiencing some problems on how our back end updates are pulled into our designer’s local environment causing most of the time compilation problems, that require help from a developer in order to be solved.
Since our designer only pushes SCSS files to our repository, we thought that maybe a temporary workaround for this problem would be doing an application wide cache, so he can work on a static version of the whole application and work on the SCSS without worrying about back end compilation process.
I know this is a development process issue, but since we need to find a quick solution and carry on , we thought that maybe this might do the job.
i found this related thread:
Vaadin 8 - application-wide cache
For my project, I have used Ionic with Angular. When my ionic project first renders then the load time was too slow. This problem occurs because when the project first renders then it takes time to load all the js files. So how I can load the 'js' file faster which will increase the load performance of my ionic project. If anyone knows the better reason why the load time is that much slower then please tell me the reason and the solution.
Because you are running in debug mode
in debug mode load time will be 7-8 secs
in prod mode it will be reduced to 4-5 secs
Also need to follow good practices while coding
Try to follow these links and tools in the link Angular Performance Checklist
Does Angular cache the js files if I do not build the app and only copy all the js, html and css files as is into production? Do they also download them only when needed?
How does angular take care of js files download and the method in which they are instantiated? Seems like ng-cli creates a single minified bundle for the app and there is no option to create just minified js files which are not bundled into one single bundle file. So seems like they are not lazy loaded and not downloaded on the fly with an http request.
This really takes a toll on the app and the load times are really slow.
The files are cached, yes, but they are not compiled. That is what it is making the pages to load slow.
Follow this guide to make your code compile ahead-of-time and your pages should start to load much faster!
Some ways to speed your load times include using Webpack, Ahead-of-Time (AOT) compilation, and Lazy Loading. I've found that the most effective way is using Server-side rendering (aka Angular Universal).
I am creating a react website. Its almost ready but when I am debugging it, its load time is 1.2 Minutes and bundle size is 28 MB.
I have tried following solutions without success so far:
https://medium.com/#rajaraodv/two-quick-ways-to-reduce-react-apps-size-in-production-82226605771a#.qfpspcha4
https://hackernoon.com/optimising-your-application-bundle-size-with-webpack-e85b00bab579#.t3vabgy27
How to minimize the size of webpack's bundle?
Did you try changing your devtool setting? I believe inline-source-map is the reason for the large file size. More info on the different devtool settings here. For production I personally use devtool:'cheap-module-source-map' and have great success with it. I hope this help some, webpack can sure be frustrating at times.
Also to have a lighter dev build I would suggest to use devtool:'eval', It's probably the most efficient as far as development goes.
JavaScript newbie here. I'm new to Angular2 and am currently learning about things like module-loaders (there's so many!), etc, so bear with me since my space of "unknown unknowns" is probably quite large.
I'm interested in creating a JavaScript based "Packaged Web App" for windows ("Packaged" in the sense that the JS is included in the Universal Windows Platform app).
One constraint to keep in mind is that I have severe limitations on the size of my packaged app. The smaller, the better.
With that in mind, I have a few specific questions that will hopefully expose the extent of my ignorance:
Without resorting to Electron or Ionic2, is it possible (also, is it a good idea) to create the offline experience in Angular2 and then only manually include the resulting transpiled .js files in my Visual Studio project?
How hard is it to manage the dependencies for these transpiled files? Are they entirely self contained?
Roughly how large would the minimum set of manually imported files end up being? When I use NPM to install angular2, it winds up being ~80mb - a large portion of this (most?) looks like dev tools, test infrastructure, etc. What's the minimal set of angular dependencies needed for the client app to work?
Thanks!
Without resorting to Electron or Ionic2, is it possible (also, is it a good idea) to create the offline experience in Angular2 and then only manually include the resulting transpiled .js files in my Visual Studio project?
Yes, it is possible. TypeScript will be compiled to javascript codes, which will be consumed by your project. So eventually, it is compiled js codes that will be necessary for your project.
But, if you are so worried about your project's size, then I suggest you using Angular 1, which is only JS codes. And for the minimum size of Angular 1 and its dependency jquery. There is a compressed version of Angular 1 (angular.min.js: 164kb) and jquery(jquery-3.1.1.min.js: 85kb).
Answering my own question here:
Yes, it's possible. You can copy over the transpiled .js files and then simply point the webview control at the generated index.html. With that being said, it's a pretty kludgy dev experience since you're constantly working around VS.
The dependencies are handled for you - it's all in the minified/uglified js files.
I haven't investigated tree-shaking yet, but it looks like I can get away with ~0.5Mb with a skeleton project.