Optimization method for slow loading of Vue first screen

Optimization method for slow loading of Vue first screen

Vue applications are too slow to load on the first screen, which is usually related to the following problems: too large package files, too many network requests, and too slow to load resources. To address these problems, we can optimize them from the following aspects:

1. Reduce the packaging volume of the project

Packaging volume is one of the core reasons for slow loading on the first screen. Optimization methods include:

1.1 Code Splitting

Lazy loading with asynchronous loading and routing, load components only when needed, reducing the volume of the first-screen package.

• Lazy route loading: Load the corresponding components of the route asynchronously.

const Home = () => import('@/views/'); // Asynchronous loadingconst About = () => import('@/views/');
export default new VueRouter({
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About }
  ]
});

• Dynamic import of components:useimport()Processing on-demand loading.

1.2 Extracting public libraries and dependencies

Convert third-party libraries (such asVue, Element-UI) is packaged separately from the business code and uses CDN to speed up loading.

• Using CDN to introduce third-party libraries: Reduce the packaging volume.
  existIntroducing third-party libraries through CDN:

<script src="/npm/[email protected]"></script>

• Webpack configuration externals：

 = {
  externals: {
    vue: 'Vue', // Use external Vue without packaging    axios: 'axios'
  }
};

1.3 Tree Shaking

Make sure that useless code is removed and reduce the package size.

• Turn on production mode packaging:usemode: 'production', turn on Tree Shaking and compression.
• Introducing UI Component Library on Demand：
  Use on-demand load instead of global introduction:

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

2. Optimize resource loading

2.1 Picture optimization

• Lazy loading:usevue-lazyloadLoad only when the image enters the viewport.

import VueLazyload from 'vue-lazyload';
(VueLazyload, { loading: '' });

• Image compression: Compress large images into smaller formats (such as WebP).

• Use the right resolution: When adapting to the mobile terminal, use low-resolution pictures.

2.2 Reduce HTTP requests

• Merge small files: Use Sprite or Base64 to encode small icons to reduce HTTP requests.
• Enable Gzip compression: Configure Gzip on the server side:
  • Nginx sample configuration：

gzip on;
gzip_types text/plain application/javascript text/css;

2.3 Using cache

• Turn on browser cache: Long-term cache of static resources (CSS, JS, pictures, etc.).

location ~* \.(js|css|png|jpg|jpeg|gif|svg)$ {
    expires 30d;
    add_header Cache-Control "public, no-transform";
}

• Using Service Worker: Implement local cache and improve loading speed.

3. Optimize first-screen rendering

3.1 SSR (server-side rendering)

Server-side rendering can greatly speed up the loading speed of the first screen and solve the problem of white screen on the first screen.

• useEasily implement server-side rendering.

3.2 Pre-rendering

For purely static pages, you can use the pre-rendering plugin to render the page into an HTML file in advance.

• Using prerender-spa-plugin：

const PrerenderSPAPlugin = require('prerender-spa-plugin');
const path = require('path');
 = {
  plugins: [
    new PrerenderSPAPlugin({
      staticDir: (__dirname, 'dist'),
      routes: [ '/', '/about', '/contact' ]
    })
  ]
};

3.3 Skeleton Screen

Display the skeleton screen before rendering on the first screen to improve the user experience.

• Use plug-ins such asvue-skeleton-webpack-plugin。

4. Improve network performance

4.1 Using HTTP/2

Turn on the HTTP/2 protocol, support multiplexing, and speed up resource loading.

4.2 Reduce first screen requests

• Reasonable settingasyncanddeferProperties, optimize the JS loading order.

<script src="" defer></script>

4.3 Preload resources

Utilizerel="preload"Load key resources in advance:

<link rel="preload" href="" rel="external nofollow"  as="style">

5. Analyze and monitor performance bottlenecks

5.1 Analysis using tools

• Chrome DevTools → Performance panel analyzes loading times and bottlenecks.
• Use the Lighthouse tool for performance evaluation.

5.2 Continuous monitoring

Monitor page performance using a performance monitoring platform such as Sentry or Google Analytics.

This is the end of this article about the optimization method of Vue's home screen loading too slowly. For more related content about Vue's home screen loading too slowly, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!