vFlow App build loading 23 mb js file?

We have a vFlow App and Its loading approx. 23 MB JS file. Its impacting the application performance. Please explain.

4 Likes

@vipin.verma @lmehta This is the burning issue for lot of vFlow applications.

@naveen.gupta you can reduce it further by building a production build but you will not be able to see the source of the application.

2 Likes

As widely known, vFlow is constructed using the Angular 8 Framework. In our Angular applications, we commonly work with development build formats, which lack both minification and uglification. Consequently, these builds tend to have longer loading times.

Several notable distinctions exist between development and production builds:

  1. Source Map (.map files): In development builds, source map files are generated, unlike in production builds. Source map files play a pivotal role in simplifying debugging even after code files are compressed and compiled. These files store information about original code locations, facilitating the mapping of compressed code back to its source file positions. This ensures efficient debugging of development build code.
  2. Minification and Uglification: While development builds remain unminified and unuglified, production builds undergo these processes. Minification involves stripping excess whitespace, comments, and optional tokens such as curly brackets and semicolons from code files. Uglification, on the other hand, entails transforming code by employing concise variable and function names. Minification and uglification are instrumental in reducing the overall bundle size.
  3. Tree Shaking: Production builds are subjected to tree shaking, a step omitted in development builds. Tree shaking focuses on removing any code that remains unused within the final bundle. This contributes to a leaner and more efficient application.
  4. AOT (Ahead-Of-Time) Compilation: While development builds utilize the Just-In-Time (JIT) compiler, production builds adopt AOT compilation.AOT compilation involves pre-compiling Angular components and templates. Consequently, when users access the application URL, they experience quicker response times. In contrast, JIT compilation compels users to wait for runtime compilation upon accessing the URL. Notably, AOT compilation reduces the size of the vendor bundle by excluding compiler-related files, as components and templates are pre-compiled. A significant advantage of AOT compilation is its ability to identify template binding errors during the build process itself.

But when you use the production build all the above issues will be solved and the application performance will be fast as compared to the development build.

4 Likes