benefits of parcel

• dev tools
• HMR - hot modules replacement --->> how - by using file watching algorithms made in c++ which keep track of your code and as soon as you try to save the file it refreshes the server with new code
• local server http://localhost:1234
• cache memory mang. ---> makes its fast
• image optimization
• compresses the file
• bundling
• content hashing
• differential bundling babel
• can also run on ssl https

• tree shaking ---> removing the extra code or function which are not used

  content hasing : -Content hashing in Parcel involves generating unique SHA-256 hashes for each file based on its content. Before deploying the application, Parcel compares these hashes with those stored in its cache directory ( .parcel-cache). If a file's hash matches its cached version, Parcel uses the cached file, avoiding unnecessary rebuilds and optimizing deployment speed. When a file's content changes, its hash updates, prompting Parcel to rebuild only the modified files and update them on the server. This approach not only improves build performance by reusing unchanged files but also ensures that browsers receive updated content reliably through unique filenames based on file hashes, preventing caching issues during deployment.

  hmr in detail - so basically when file is modified i.e its hash is now different that of older version the modified file is only updated in the browser and all the other file whose hash are same of older hash uses the .parcel-cache file which reduce the time and avoid the rebuilding the whole application from scratch and this all thing is triggered every time when the programmer save the file && the browser is running that application (live)

  differential bundling : since babel is used for bundling in parcel -- it perform several task

  • babel convert the es6+ js code into the es5 code which necessary for you application to run in older browser
  • It convert the jsx code of react into the js code (jsx into js object (ast)) as we all know browser's v8 engine is unable to understant the jsx code
  • It also convert typescript in JavaScript as TS is superset of js that add static type to js