Recently, I have been working on optimizing the page loading time of a complex low-code application. Previously, I have done some similar optimization work in other projects, but they are not react projects. As it’s based on Webpack, in order to reduce the page loading time, I have to try to optimize the webpack bundle size or the chunk size of the application, in the mean time, I need to do some code splitting work.
Use The Webpack Bundle Analyzer
I’ve done some research on the webpack bundle analyzer, and I found that it can help me to analyze the bundle size(Gzip compressed size in particular) of the application. So, I decided to use it. I’ve installed it in my project, and I’ve set it up in my webpack config file. After that, I can run the command: npm run analyze. And I can see the bundle size of the whole application in details. I can easily figure out some abandoned modules that are not used in the application, but they are bundled in the application. Secondly, I alse have found some large modules or libraries that are bundled into a huge bundle. Lastly, I found the source map setting is enabled, which is not good for the performance.
Optimize The Application
From the analysis above, I can easily figure out that the application is too large for some known reasons. So, firstly, I try to delete some unused modules one by one. Secondly, I try to split the large modules or libraries into smaller modules or libraries by using the webpack split-chunks plugin or using external strategy in config file. Finally, I disable the source map setting in production mode.
Trying To Apply The CDN Strategy
I’m still working on the optimization of the application in the rendering process, such as the SSR（Server Side Render） strategy, or adding some loading animation while the application is not ready, or optimize the code in the rendering process and make it more efficient and so on.