I am learning React and I'm running it using create-react-app, which allows me to edit text in a file named App.js and as I save any changes in that file, the webpage with the address http://localhost:3000/ in browser automatically updates without reloading. Normally, while making html/plain js files, i need to reload the page. So how does it dynamically update itself?
There is a concept of Hot Reloading. The idea behind hot reloading is to keep the app running and to inject new versions of the files that you edited at runtime. It leverages HMR and without reloading the page, replaces changed components in-place, preserving state. That means that, your change will be visible in about half a second; if it was a dialog, you wouldn't need to re-open it, your text inputs remain filled, etc. In short, it's a massive boon to iterative development where you spend much less time waiting for your app to reload. You can find more details here
The cli which you are using uses webpack to achieve this. Webpack is a module bundler it creates a bundle file from all your js/ts/jsx/tsx files which you embed into your index.html file.To achieve live reloading webpack uses webpack-dev-server(a small node.js express server).You can cofigure your webpack to watch for changes on your file and webpack will update your bundle file whenever your code is changed. You can learn more about how it does here.
All the configurations for webpack are written in webpack.config file.You can learn more about webpack here.You can also follow this link
This is actually not a standalone thing.
This happen because react use webpack dev server which reload package if you make any changes.
As if you want to do same , you need to setup a local server and always make editing in same server.
browserSync is also a option but you need to use nodejs then
Related
I am currently about to embark on a redesign. This requires many scss changes and reloading the website. I would like to take advantage of the ng nerve command that uses live reload.
Does anyone know how I can run the ng serve and have the vendor.js file minified? When I use ng serve --prod it minifies the vendor.js... but it takes 10-15 seconds to build it.
Currently my vendor.js file is 8.9mb unminified and it's taking 2-3 seconds reach reload in development.
Anyone have ideas?
ng serve --prod while it does to minification, takes 2-3 minutes each time.
Note: Currently using Angular 6.X
I had observed the recompilation of angular projects using ng serve with Visual Studio Code. Vendor.js is not recompiled when you make changes to the project. It is only compiled during the first execution of ng serve.
If you wish to improve compile speed in development mode, you might want to consider implementing lazy loading. If lazy loading is implemented, whenever you make changes to a component, only that component's module is recompiled. This can greatly save compilation time in the long run.
This had happened to me in one of my first Angular projects (a school assignment). To cut the long story short, I had read about lazy-loading, implemented it to the admin dashboard module, but my friend refused to implement it to the user module because he would had to shift a lot of code around and restructure the project. As the project became bigger... it became evident how important lazy-loading can be...
First compilation: (I will explain a bit) manage-* modules are feature modules belonging to the admin module. Every component in the user-module: sidebar, navbar, filter, search, etc, all belongs to the user module, hence it's significantly larger, 3.46MB compared to admin and it's feature modules.
E.g. Commenting 3 lines of html in one of the component in user module recompiles the entire user-module and takes 5523ms. If I am running photoshop, or other memory intensive programs, it'd take much much longer!
E.g. Commenting 3 lines of html and recompiling a feature module in admin dashboard module takes < 1s:
I am still new to Angular but lesson learnt: do lazy-loading, it does saves user's bandwidth and your development time =]
The solution to your problem isn't exactly what you think it is, this is a common problem across all front-end frameworks and webpack builds.
Webpack provides an elegant solution to handle this. It's called hot module replacement. I.e. webpack will change your code and styles on the fly without requiring to reload the page. Angular needs a bit of customisation to set this up which is outlined step by step here.
https://github.com/angular/angular-cli/blob/master/docs/documentation/stories/configure-hmr.md
I think you are facing this issue in the wrong way.
I understand you are redesigning an angular app and using ng serve to see your work realtime in the browser, but you are suffering of slow build time as vendor.js is rebuilt on each change.
The problem is not that vendor.js is big (always is) but that is been built on each change. As other answers mentioned, changes on application code should not (usually) trigger the rebuild of vendor.js. This indicates another problem, probably you are messing something with scss imports.
Also, using ng serve --prod probably won't solve your problem at all. Build times are higher than non optimized builds and I don't think you problem was solved by minifying code (Again your problem is on the build time).
In any case, if you want to go ahead with your original question and run the ng serve and have the vendor.js file minified, you will need to create a custom webpack configuration, have a look on these sites:
https://dev.to/meltedspark/customizing-angular-cli-6-buildan-alternative-to-ng-eject-1oc4
https://angular-guru.com/blog/angular-webpack
In this last site, you can find the webpack configuration which corresponds to vendor.js
Hope this helps, I would need more details to provide a better answer.
Firstly, why do you need it so badly? Yes, vendor.js will not be minified, but it will not be re-compiled on SCSS/view-level changes either, right?
So, at the end of the exercise, the advantage you are going to receive is only about first-time loading a ~2MiB file vs an 8.9MiB file, which would be marginal since you can choose to enable the browser's BFcache (by NOT checking "Disable cache" under DevTools>Network)
If you must do it, I guess an approach would be to go with Hot Module Replacement for the Component's module you would be working on.
EDIT:
Personally, I find too many reloads for small visual HTML/CSS changes an overkill. Sometimes I "Inspect" the elements, and change the HTML/CSS via devTools and copy the HTML/CSS to a temp place. Then I make those 5-6 changes to the Components and save and reload to verify.
It's always a better practice to "Inspect" element and make the visual changes (like minor CSS style changes) and check how it looks then and there, instead of making those changes in your real code and waiting for a whole re-build cycle just to see a minor CSS change.
You can use lazy loading in your app to reduce the bundle size . It also increases the speed of the application .
I'm using Angular 5.2.2 version and when a new user hit my live application first time it take too much time; the reason behind this main.bundle.js size is too much big therefore it take more time than usual.
I applied "ng build --prod" as well as some lazy loading on few component but it didn't work.
as well as I also removed redundant components , assets etc in application but it also not work.
Can anyone suggest me what I can do
Thanks in advance
Yasir
I had the same problem because I was not using lazy loading. Lazy loading is a technique to separate the application in different modules those which are required only when the application needs them. Lazy loading Angular's official documentation.
In my case I created a module per every parent url route (e. g. /car -> create a module, /car/:id -> include it in your car module). With this strategy my loading time now is about 3s. but previously it was around 12s.
First, are sure you that slowness is caused by the main.bundle.js file? What's its size?
Lazy loaded modules should normally help, as pointed out
Independently from angular, make sure that you enable compression on your webserver (nginx or nodejs or whatever you use)
For nodejs
https://github.com/expressjs/compression
For nginx
https://www.nginx.com/resources/admin-guide/compression-and-decompression/
You can try Ahead of Time Compilation which will make your bundle size even smaller.
ng build --prod --aot
This will remove compiler code from the bundle and also any unused features like ngSwitch or ngIf is removed if not used in templates.
Every time we release a new version of our software which is bundled using Browserify, we are finding that we need to ask our users to clear their cache using the regular methods of CTRL+F5 or diving into the browser settings. It is not ideal when there are a thousand or so users. We are trying to work out a way that we can perhaps get around this. I am open to all sorts of options.
Our project is ReactJS based, so runs in the browser and connects to back end services via a RESTful API. We do track which version is loaded and this is visible from within the console. Using the version number we can compare on two different machines that one user is running the latest version whereas someone else may not be.
The code is bundled into two separate files and I feel that this is where we should be looking.
You need to change the file name on each new release.
A hash of the file is an appropriate thing you could add.
Check out md5ify to add this to your project build.
If you implement this yourself, make sure to also load the correct filename in your index.html file.
Edit:
To automatically load the correct file you need to have a placeholder in your main html.
Then you need a manifest.json file that looks like following:
{
"main.js": "main.[HASH].js"
}
This has to be created automatically after the bundling.
Now you can replace the placeholder with correct asset by doing a lookup in the manifest file.
You either have to write your own scripts for this or use something like gulp together with browserify.
Another solution would be webpack
Id like to run HMR in production, using it for seamless application updates. I cannot seem to find any docs or tutorials regarding how to do this.
My setup is currently "serverless", and statics are served from AWS S3. My first thought is i would create an "Update" server of some sort, wherby the HMR clients would poll for updates, and the magic would work.
My questions:
a) How do I run this in production (optimally)
b) For this to work the "Update" server will have to know of module changes, how?
I know the json file with the updates is what HMR relies on to know of the changes, will i have to push some sort of this file to the server?
Or, Do I have the server watch S3 files somehow, and recompile, in turn triggering updates.
A complete solution would be awesome, but also just some sudo logic as to how this could work would be great.
Read this two documents to understand how it works:
https://github.com/webpack/docs/wiki/hot-module-replacement-with-webpack
https://github.com/webpack/docs/wiki/hot-module-replacement
No idea to what you mean by "serverless"... How would you serve a website without a server? You will need at least webpack or a nodejs/express instance running somewhere
This will not be optimal. This feature is thought to be used for development. HMR will add listeners to the application for file changes and add code for replacing old modules with new ones. This adds overhead to your code. Optimal would be no hmr.
Having an AngularJS app of basic structure - components, providers, services.. many separated .js files.. I use a grunt taks to compile them into single .js file eg: application.js?v${build}
To save time, I use IDEA plugin "Live Edit", it reflects all changes in .html real-time to browser.
All connected by JavaScript Debug config via "JetBrains IDE Support" plugin with Chromium web browser. All those work fine.
Now the problem: I cannot live reload changes in angular/JS. After every change I have to manually run grunt task to compile angular to single js and hit F5 in browser. (I know it is not a big deal, but image doing that 1000 in a day :) Any help appreciated!
PS: I can debug the JS, debugger stop correctly on breakpoints set in IDEA IDE.
How about grunt plugins for watching changes and using browser sync for reload? There are also other approaches like using yeoman for creating structures and serving them with grunt automatically.