One, the origin
There is an old project that uses webpack+ React + React-router.
As the project gets bigger and bigger, there are more and more routes. When starting webpack, I obviously feel that the startup speed is getting slower and slower. When the number of routes reaches hundreds, the startup time of Webpack is nearly 1 minute, which is too slow.
And most of the online tutorials, do route segmentation, are discussing the page load when the code segmentation and lazy loading, and there is no optimization for webpack.
Common performance optimizations for WebPack are to turn on caching, narrow down lookups, build with ESbuild instead of Babel, use externals, only compile code under development with DLLS, upgrade the webPack version, and so on, or use a new tool such as Vite.
However, these optimizations, when your project is very large, the page routing is very heavy, the use of the effect is still insufficient, so further optimization is needed.
Second, the train of thought
Since the biggest factor affecting the cold start of WebPack development is the excessive number of pages and routes, an optimized solution is needed to reduce the number of routes currently packaged builds. That is, which page you’re developing and debugging, tell WebPack to just pack the current route, and I don’t care what else.
The low option is to manually comment out redundant routes, but as an ambitious front-end engineer, how can you use this slash-and-burn approach?
Of course, writing a WebPack plug-in will fit our identity.
How does this plug-in work? When webpack is started, no route is packed. When the browser visits the page, the current route address is told to Webpack. After webpack receives the message, it only packs the corresponding route code.
Three, practice
I would like this feature to be a plug-in that is easy to use and configure and can be used directly in the webPack configuration file:
The first parameter is the location of the routing list file and the second parameter is the number of cache layers. What is the use of this parameter?
Let’s imagine that when you go to a list page and jump to a New, Edit, detail page, I don’t need to re-package every jump, so I need to cache a certain number of routes, so I don’t need to re-package.
So how do we get the browser to tell WebPack about the route change?
What I do is, after the HTML-webpack-plugin executes, I insert a piece of JS code that listens for changes in the route and then sends the request. The agreed request address is then intercepted in the Webpack.
So my project here is a little bit older and webpack3, webpack5 is written a little bit differently, so you’ll notice, but it’s the same principle.
Then listen before in webpack-dev-server:
And then get the routing address, and here I get the change in the hash value of the front-end route. Matches corresponding routes for filtering. If regular matching is involved, you can use some route regular libraries for filtering. Then write to a temporary file.
To make things even better, I can automatically change the routing file address referenced in the file and replace it with a temporary file, but I did this manually to save trouble. To do so, you need to know a little about ast, match it in import Declaration, and then replace it with a temporary file, see the implementation of babel-pluhin-import.
Effect of four,
The startup speed is almost instantaneous. When you visit the page, it only takes tens of milliseconds to refresh the file and repackage the corresponding page, so you can say that you are done.