What should I do if the Vue project loads slowly for the first time? Two solutions-Vue.js-php.cn

What should I do if the Vue project loads slowly for the first time? Two solutions

青灯夜游

Release： 2022-06-06 19:42:08

forward

7003 people have browsed it

What should I do if the vue project loads slowly for the first time? The following article will introduce to you the reasons why the vue page is slow to load for the first time and two solutions. I hope it will be helpful to everyone!

What should I do if the Vue project loads slowly for the first time? Two solutions

When the project that packaged vue was deployed to the server for the first time, I found that the initial loading was particularly slow. It took nearly 20 seconds for the page to load, which was not as smooth as in the development environment. . The main reason is that if the page is packaged without relevant configuration, the resource file will be extremely large, and it will be extremely time-consuming to load them all at once. Here is a brief summary of some optimization solutions I have used. (Learning video sharing: vuejs video tutorial)

First we can install the webpack-bundle-analyzer plug-in. Through this plug-in we can see the size of the packaged file when packaging, which can be clearly seen. to see which files are larger.

Solution 1

1. Remove the map file in the compiled file.

After compilation, we will see a lot of .map files in the folder. These files mainly help us debug the code online and view the style. Therefore, in order to avoid the deployment package being too large, these files are usually not generated.

Set the value of productionSourceMap to false in the config/index.js file. After packaging again, you can see that there is no map file in the project file (file size 35MB–>10.5MB)

2, vue-router routing lazy loading

Lazy loading is the delayed loading of components. Usually, when a vue page is entered after running, there will be a default page, while other pages can only be clicked on It needs to be loaded later. Using lazy loading can divide the resources in the page into multiple parts, thereby reducing the time spent on the first load.

Lazy loading routing configuration:

What should I do if the Vue project loads slowly for the first time? Two solutions

Non-lazy loading routing configuration:

What should I do if the Vue project loads slowly for the first time? Two solutions

As shown in the picture Shown as a js file packaged through lazy loading. Instead of lazy loading, there is generally only one app.js file after packaging.

What should I do if the Vue project loads slowly for the first time? Two solutions

Solution 2

Use CDN to reduce the code size and speed up the request

Why use CDN

Using CDN mainly solves two problems:

The packaging time is too long, the code size after packaging is too large, and the request is slow
The server network is not Stable bandwidth is not high, using CDN can avoid server bandwidth problems

Specific steps

1.Introduce CDN## in /index.html #

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>vue-manage-system</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">

        <script src="https://cdn.bootcss.com/vue/2.5.3/vue.js"></script>
        <script src="https://cdn.bootcss.com/vue-router/2.7.0/vue-router.min.js"></script>
        <script src="https://cdn.bootcss.com/axios/0.17.1/axios.min.js"></script>
        <link rel="stylesheet" href="https://cdn.bootcss.com/element-ui/2.4.0/theme-chalk/index.css">
        <script src="https://cdn.bootcss.com/element-ui/2.4.0/index.js"></script>
    </head>
    <body>
        <div id="app"></div>
    </body>
</html>

Copy after login

Note: After modifying the configuration, it still prompts that Element is undefined. This is because Element depends on Vue, and vue.js needs to be introduced before element-ui, so vue.js must also be changed to the cnd introduction method.

2. Modify the configuration in /build/webpack.base.conf.js. Add the externals attribute to module.exports (see https://webpack.docschina.org/configuration/externals/ for details), where the key is the one referenced in the project and the value is the name of the referenced resource. It should be noted that the resource name needs to check the referenced JS source code to see what the global variables are. For example, the global variable of element-ui is ELEMENT

 module.exports = {
   context: path.resolve(__dirname, &#39;../&#39;),
   entry: {
     app: &#39;./src/main.js&#39;
   },
   externals: {
     &#39;vue&#39;: &#39;Vue&#39;,
     &#39;vue-router&#39;: &#39;VueRouter&#39;,
     &#39;ElementUI&#39;: &#39;ELEMENT&#39;,
     &#39;axios&#39;: &#39;axios&#39;,
   }
 }

Copy after login

3. Delete the original import

If you do not delete the original import, the project will still introduce resources from node_modules.

In other words, if you do not delete it, the referenced resources will still be packaged together when npm run build, and the generated file will be much larger. So I think it’s better to delete it.

For example:

What should I do if the Vue project loads slowly for the first time? Two solutions

(Learning video sharing:

web front-end development, Basic programming video)

The above is the detailed content of What should I do if the Vue project loads slowly for the first time? Two solutions. For more information, please follow other related articles on the PHP Chinese website!