Location>code7788 >text

Introduce some optimization solutions for single page first-screen loading ~

Popularity：583 ℃/2025-04-01 22:43:03

Single-page application (SPA) homepage loading optimization solution

Home page loading optimization is the core performance indicator of single-page applications (SPAs, such as Vue/React). The first page users enter is mostly home page, which is also an important indicator of user experience.
So what aspects do you usually buy? It mainly starts from the aspects/dimensionality of resource optimization (resource volume control), server optimization (network transmission optimization), loading optimization (code execution efficiency), rendering optimization (rendering pipeline optimization), and browser optimization (browser mechanism utilization). I have listed a few simple descriptions below. For details, you can search the Internet for information or ask about AI.

1. Code Splitting

principle

Modern front-end frameworks (such as Vue, React) are usually packaged using Webpack. By default, all code is packaged into a large JavaScript file, causing the first screen to load slowly. Code segmentation can split different modules into independent files, load them as needed, reduce the volume of JavaScript on the first screen, and the component usage is introduced in sequence.

Optimization solution

  • Load components on demand: Use Webpackimport()Carry out dynamic import.
  • Vue Router lazy loading: For routing components, use lazy loading.

Example (Vue Router lazy loading)：

const Home = () => import('@/views/');
const About = () => import('@/views/');

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
];

2. Preload & Prefetch

principle

  • preload: Prioritize the loading of resources that may be used on the current page.
  • prefetch: Low priority loads possible future access resources.

Optimization solution

In Vue Router, you canwebpackPrefetchandwebpackPreloadPerform optimization.

Example：

const Home = () => import(/* webpackPrefetch: true */ '@/views/');
const About = () => import(/* webpackPreload: true */ '@/views/');

3. Server-side rendering (SSR) and static site generation (SSG)

principle

  • SSR(Server-Side Rendering): Server pre-renders HTML to improve the speed of the first screen.
  • SSG(Static Site Generation): Pre-generate HTML to improve the speed of accessing static resources.

Optimization solution

  • Implement Vue SSR or SSG using .
  • usegenerateGenerate static HTML.

4. Use HTTP/2 or HTTP/3

principle

  • HTTP/2Supports multiplexing, reduces request blocking, and improves concurrent loading capabilities.
  • HTTP/3Further optimize packet loss recovery to improve performance.

Optimization solution

  • Ensure that the server supports HTTP/2 (Nginx configurationhttp2 on;）。
  • uselink rel="preload"Preload critical resources.

5. Enable Gzip or Brotli compression

principle

Gzip and Brotli can effectively reduce HTML, CSS, and JS volume and improve loading speed.

Optimization solution

  • Enable Gzip/Brotli in Nginx or Apache servers.
  • Configuration in Webpackcompression-webpack-pluginCompression during build.

6. Reduce JS volume/image volume

Optimization solution

  • usewebpack-bundle-analyzerCheck the package size.
  • Introduce third-party libraries on demand (e.g.lodash-esreplacelodash）。
  • Replace smaller libraries such asdayjsreplace。
  • Image weight loss: PNG TransferWebP, for large picturesCDN thumbnail(Original image 2MB → 200KB after compression)

7. Use CDN to speed up

Optimization solution

  • Load core libraries such as Vue, Axios, Vuex using CDN.
  • Example:
<script src="/npm/[email protected]/dist/"></script>

8. Skeleton (skeleton screen)

principle

When the page is loaded, use the skeleton screen-to-place position to improve the user experience.

Optimization solution

  • Used in Vue componentsv-iforv-showControl the skeleton screen.
  • Example:
<template>
   <div v-if="loading" class="skeleton"></div>
   <div v-else class="content">Content loading complete</div>
 </template>

9. Lazy Load

Optimization solution

  • Only the necessary content on the first screen is loaded, and other contents are delayed.
  • Used in Vuev-lazyLazy loading of images.

10. Service Worker (PWA Support)

principle

Service Worker allows SPA to cache resources and enable offline access.

Optimization solution

  • Use Workbox to register Service Worker.
  • Example:
if ('serviceWorker' in navigator) {
  ('/');
}

11. Local storage cache

Optimization solution

  • uselocalStorage、sessionStorageorIndexedDBAs a data cache.
  • Example:
('userData', (user));
const data = (('userData'));

Summarize

  • First visit: unpacking, compressing, moving ahead
  • Repeated access: rely on cache and go to high speed
  • Make users feel fast: first show the unfinished house (skeleton screen), secretly decorate the background (load resources)

Through the above optimization solutions, the SPA home screen loading time can be effectively reduced and the user experience can be improved.

<Previous Next>