How To Optimize The Page Loading Time In Your Create-react-app Project?

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

The CDN strategy is to use the CDN(Content Delivery Network service) to serve the static files. The CDN is a service that provides a static file server. With CDN, you can serve the static files from a single server, which is faster than the traditional way. That sounds good, right? However, we need to tackle the problem of the CDN. What’s the problem? For some reasons(CORS and the like), the frontend application and the backend application are in the same domain. If we need fire a ajax request inside some static javascript files, we have to take the CORS(Cross-Origin Resource Sharing, the same-origin security policy) into consideration. I am considering to use the partial CDN strategy to solve the problem. For example, if we are using axios to make ajax request, we can’t put the axios.js file into the CDN. For other static files, we can put them into the CDN. Testing ha…

What’s next?

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.

作者: 博主

Talk is cheap, show me the code!



Captcha Code