Summary of six solutions to the white screen on the first screen of Vue

1. Enable laziness loading on routing

Using lazy loading to routes can significantly reduce the initial loading time of your application. It provides dynamic import function, which can achieve lazy loading of routing. The following are the specific steps:

1. Configure the laziness loading of routing:

Modify the router/ file and use import for dynamic import.

const Home = () => import('@/views/');
const About = () => import('@/views/');
const routes = [
    {
        path: '/',
        name: 'Home',
        component: Home
    },
    {
        path: '/about',
        name: 'About',
        component: About
    }
];

2. Confirm the packaging configuration:

Make sure your Webpack configuration supports dynamic import. The default configuration of Vue CLI is already supported. If it is a custom configuration, you need to check the Webpack configuration file.

In this way, the corresponding components will be loaded only when the user accesses a certain route, thereby reducing the initial loading time and improving the first-screen rendering speed.

2. Optimize the packaging volume

Reducing the packaging volume of the application helps improve the loading speed of the first screen. It can be implemented by:

1. Use Webpack to optimize configuration:

Use the splitChunks plugin to split the code.

optimization: {
    splitChunks: {
        chunks: 'all',
    },
}

2. Remove unused dependencies:

Clean up unused dependencies and files in the project.

3. Turn on Gzip compression:

Configure the server to enable Gzip compression to reduce the size of the transferred file.

3. Use the skeleton screen

The skeleton screen is a placeholder used to display it to the user when the data has not been loaded, avoiding the white screen. The steps to use the skeleton screen are as follows:

1. Create skeleton screen components:

Create a simple skeleton screen component that simulates the basic layout of the page.

<template>
    <div class="skeleton">
        <div class="skeleton-header"></div>
        <div class="skeleton-content"></div>
    </div>
</template>

2. Reference the skeleton screen in the main component:

When the main component is loaded, the skeleton screen is displayed first, and the data is loaded before switching to the real content.

<template>
    <div>
        <Skeleton v-if="loading" />
        <RealContent v-else />
    </div>
</template>
<script>
export default {
    data() {
        return {
            loading: true,
        };
    },
    mounted() {
        // Simulate data loading        setTimeout(() => {
             = false;
        }, 2000);
    },
};
</script>

4. Server-side rendering

Using server-side rendering (SSR) can generate HTML on the server side, thereby avoiding the white screen problem caused by client-side rendering. Vue provides a framework to facilitate server-side rendering.

1. Installation:

Install using the Vue CLI.

vue create my-nuxt-app
cd my-nuxt-app
vue add nuxt

2. Configuration Project:

Configure according to project requirements, such as routing, status management, etc.

Through server rendering, a complete HTML page can be generated on the server side. The client only needs to load static resources, which greatly improves the rendering speed of the first screen.

5. Reduce dependency library

Reducing the use of dependent libraries can reduce the packaging volume, thereby increasing loading speed. It can be implemented by:

1. Remove unused dependencies:

Regularly check the dependency library in the project and remove unused parts.

2. Use lightweight libraries:

Preferred libraries with similar functions but smaller sizes. For example, use axios instead of request.

3. Introduce on demand:

For large UI libraries, components can be introduced on demand, avoiding all components at once.

import { Button } from 'element-ui';
(, Button);

6. Asynchronous loading of resources

By loading resources asynchronously, the initial load volume can be reduced and the first-screen rendering speed can be improved. Specific methods include:

1. Use <link rel="preload">:

Load key resources such as fonts and images in advance.

<link rel="preload" href="/path/to/font.woff2" rel="external nofollow"  as="font" type="font/woff2" crossorigin="anonymous">

2. Asynchronous loading of non-critical CSS:

Load non-critical CSS files asynchronously to avoid blocking rendering.

<link rel="stylesheet" href="" rel="external nofollow"  media="print" onload="='all'">

3. Lazy loading of pictures and videos:

Using lazyload technology, images and videos are lazy loaded and only loaded if needed.

<img src="" data-src="" class="lazyload">

In summary, by enabling lazy loading of routing, optimizing packaging volume, using skeleton screen, server-side rendering, reducing dependency libraries and asynchronous loading resources, the first-screen white screen problem of Vue applications can be effectively solved. During the specific implementation process, appropriate optimization methods can be selected based on the actual situation of the project, and combined with the above methods, further improving the user experience.

Related Q&A FAQs

Q: Why does the Vue project have a white screen when it loads the first screen?

The problem of white screen on the first screen is a common problem in the development process of Vue projects. There may be many reasons for white screens, such as slow network loading speed, code logic problems, resource loading failure, etc. Below are some solutions to the problem of white screen on the first screen.

Q: How to speed up the loading speed of Vue project’s first screen?

The loading speed of the first screen is one of the important factors that affect the user experience. In order to speed up the loading of the Vue project's first screen, the following methods can be taken:

1. Use asynchronous component loading to divide the page into multiple small modules, load on demand, and reduce the amount of resources loaded for the first time;

2. Use the route to load lazy load the page as needed, and only the resources required by the current page;

3. Use CDN acceleration to store static resources on the CDN to speed up the loading speed of resources;

4. Use cache to cache some infrequently changing resources to reduce loading time.

Q: How to solve the problem of white screen on the first screen caused by resource loading failure in Vue project?

Failure to load resources is a common cause of white screen problems in the first screen. In order to solve the problem of white screen on the first screen caused by resource loading failure, the following methods can be taken:

1. Check whether the resource path is correct to ensure that the resource can be loaded correctly;

2. Use webpack plug-ins to process resources, such as url-loader, file-loader, etc., and the resources can be processed and correctly introduced;

3. Using CDN to load resources can reduce the probability of resource loading failure;

4. Using preload and pre-rendering technology, the resources required for the page can be loaded and rendered in advance to avoid white screen problems caused by loading failures.

This is the article about the six solutions for the appearance of Vue's first-screen white screen. For more related content on Vue's first-screen white screen, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!