Shulou(Shulou.com)05/31 Report--

This article mainly explains "how to solve the hot update pit of vue project". the explanation content in this article is simple and clear, easy to learn and understand. please follow the idea of Xiaobian and go deep into it slowly to study and learn "how to solve the hot update pit of vue project" together.

Vue Project Hot Update Pit

Today I encountered a pit while using vue projects constructed with vue-cli.

setInterval(() => { console.log('This is one. ')}, 10000)

After operation, it is as follows:

At this point we modify the code, do not refresh the page:

setInterval(() => { console.log('This is two. ')}, 1000)

The result is as follows, found that the previous timing function exists for a long time, hot update!== Refresh page!!! remember

vue hot items update slowly

Suddenly one day, vue project running, hot update time card to 75% of the place card for a long time, a hot update to 10 seconds, this is simply delay development progress, can not stand, how to do?

Find out where hot updates are slow-analyze why

For this analysis of the reasons for slow hot update, the steps are as follows

First add the startup command to the package.

--progress --watch --colors --profile

First, explain the meaning of these parameters.

- progress build progress

- Watch real-time monitoring

- Steps in profile compilation time consuming

Add this configuration, restart the project, you can see the time-consuming

solutions

The red box in the picture takes the most time, that is, the place where the card reaches 75% takes the most time. What should I do?

Ask God, and God will say,"Do this."

1. Install babel-plugin-dynamic-import-node plugin

$ npm install babel-plugin-dynamic-import-node

2. Add configuration dynamic-import-node to.babelrc file

Company project scaffold is vue-chli 2.0

So add the configuration dynamic-import-node to the.babelrc file

The great gods on the Internet said that it was good to add, very excited, finally good, however, I ran the project again, still the same, still snail speed, still stuck at 75%... Heart plug ~~~~~~~

3. Change the route lazy loading mode

I asked for help from a great god. The great god said that there were too many routes. Yes, there were more and more projects. What should I do? Let me try to use import to load the route lazily, because I am now using require to load the route lazily, as shown below.

Replace the require mode with the import mode

Project run again, 1, 2 seconds hot update success ~~ tears collapse, finally good, correct the reason, I guess is the installation of plug-in babel-plugin-dynamic-import-node, and import route loading mode to play a role.

Thank you for your reading. The above is the content of "how to solve the hot update pit of vue project." After studying this article, I believe everyone has a deeper understanding of how to solve this problem in the hot update pit of vue project. The specific use situation still needs to be verified by practice. Here is, Xiaobian will push more articles related to knowledge points for everyone, welcome to pay attention!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.