Cause 1.
A recent project used UmiJS, which is a nice lazy framework that integrates many features and configurations, and has a perfect scaffolding that requires almost no secondary configuration, right out of the box. But once I packaged, UMiJS packaged almost all of the code into a JS file. This JS is usually 1024K, which is not objective for poor network transmission. So I set my browser to 3G, and ho-ho, it’s all white, and that’s embarrassing. Although the JS code can be reduced later through code spliting or asynchronous route loading, there will still be a relatively large JS-source file. This is a poor environmental health check for a poor network. Front-end engineers are looking for a better user experience, so I started thinking about how to solve this problem.
2. Explore
Modern mainstream front-end development is SPA mode, so the first step of the browser is to load index.html, and then download the JS file, what we need to do is to load JS when the page can have a user waiting for js effect. In the past, most people would choose a chrysanthemum pattern loading, but now more popular dynamic skeleton screen. For skeleton screens, ANTD also comes with a component, which is nice, but it will be packaged into JS, which is not what we want. So I took the UMiJS HTML template and added an ANTD based skeleton screen HTML code to the root div. Why is it in this? Because after loading js, the relevant elements of our project will be covered by the elements in this div, to achieve the skeleton screen after the display of our project seamless. And the skeleton screen part of the code is not much, index.html load quickly. So we have a skeleton screen while we’re waiting for JS, and the experience goes up quite a bit.
3. Improve
Now most projects will have a token to login free situation. Yes, it is possible that different routes will display different pages, and the skeleton screen written on the template will look very pale. So the skeleton screen in index. HTML can’t be dead, it has to be inverted. Webpack research is not in-depth, I began to look at the webpack official website, to find a plug-in can solve? HtmlPlugin is one direction. We looked at a lot of configuration items and found that this plug-in also did not achieve the desired effect. No way, learn to write a Webpack plug-in. Code you can go to my Github to see it, I won’t say more. This plugin can be configured to display different skeleton screens for different routing options. For example, configure a skeleton screen for login when the route is /login, and a skeleton screen for the home page when the route is /index. Then the user will have different intuitive experience when waiting for JS in weak network, and the user experience will be further improved.
4. New problems
So I added the self-tested plugin to the configuration of umiJS and found!! The life cycle of the WebPackhtmlPlugin cannot be listened on. No way, according to the umiJS plug-in development mechanism and developed a set of UMI -plugin- related plug-ins. Finally, I solved my problem.
5. The last
Finally, I hope you don’t need my plug-ins, and I’ve also opened source my two plug-ins. I hope the gods can correct the shortcomings.
npm install spa-simple-skeleton // For normal SPA pages
/ / or
npm install umi-plugin-simple-skeleton / / for umijs
Copy the codeOr spa, umi. Thank you for your attention
About author: Zhang Shuan,And in the futureBig data front-end engineer, focusing on HTML/CSS/JS learning and development.