When a page component of Vue.js is relatively large, it is slow to switch to this page for the first time. How to optimize it?

these two days to do the project with vue+elementUI, a page because of require map json data. When packing, the corresponding js file of the component is much larger, on M. This causes the switch route to enter this page without responding. It took several seconds to switch to this page. I took a look at the console and spent the last few seconds loading the corresponding js file for this component.
so the question is, why don"t I just switch to the corresponding page when I click Navigation to switch routes, and then start loading the js file?
first of all, routing lazy loading has been set, other pages should be relatively small js file is not so obvious, do not feel stutter. But the js file on this page is too large. Catton is obvious. Normally, you should click and switch immediately, so that you can enter the new route first. even if the file load is slow, I can give a prompt that is being loaded to optimize the user experience.
if there are any great gods in such a situation, please give us some advice

.
Jul.20,2021

because there is no
on this page before the corresponding package is loaded. What you need is to separate the map function from the rest of the page, and then load this component asynchronously when the page is loaded, so that you can render the page faster, and then output the page content routed by waiting information


through the loading status. In fact, it is also in this js file that


the problem is not vue, that the map file you referenced is too large, and slow rendering is not a problem with vue, but because the map file is too large, there are too many nodes to render. You can use the tool to compress the map file. I have tried to use the world map provided by echarts directly before, and the computer is stuck with good performance. You can try this tool http://blog.giscafer.com/maps. to compress the image source

.
Menu