preface

A regular VUE project is packaged and accessed, returning an HTML containing only div, with the rest of the content blocks dynamically generated through JS.

There are two big problems:

  • Is not conducive to seo
  • The first screen is slow to load and the user experience is poor

This article is based on their own project experience summary of the scheme, if there are shortcomings, welcome to point out ~

To optimize the

SSR

SSR(Server-side Rendering) is server-side Rendering. Vue components are rendered on the Server Side as assembled HTML strings, and then sent directly to the browser. Finally, you need to mix these static tags into a fully interactive application on the client Side.

After redeploying the build project using SSR:

You can see that the returned content already contains the HTML code block of the first screen content, Perfect! .

Speed Portal: a small Demo based on VUE-CLI4.0 +Typescript+SSR

According to the need to introduce

Use es6 Module for on-demand import

1. Import components as required from the routing file

# router.index.ts
export function createRouter() {
  return new Router({
    mode: 'history',
    routes: [
      {
        path: '/',
        name: 'Home',
        component: () => import(/* webpackChunkName: "Home"* /'./views/Home.vue'),
      },
      {
        path: '/about',
        name: 'About',
        component: () => import(/* webpackChunkName: "about"* /'./views/About.vue'),},]}); }Copy the code

2. Static libraries introduce modules on demand, not all

Like in the Element-UI library, I just want to use the Button component:

import {
  button
} from 'element-ui';
Copy the code

Request to optimize

1. Placement sequence of CSS and JS

Put the CSS file in the header and the JS file in front of the body, but vue has already handled this for us

2. Use font ICONS and Sprite images for icon resources

We know that HTTP requires 3 handshakes to establish a connection, and too many requests can affect loading speed

We should minimize unnecessary static resources, such as ICONS on the page, as shown in the following picture on Tencent’s official website:

Import a finished image directly and set the position of the image according to background-position

A recommended site for making Sprite images is CSS Sprites Generator

The CDN to accelerate

Content Delivery Network (CDN) is an intelligent virtual Network built on the basis of the existing Network. It relies on edge servers deployed in various places to enable users to obtain the required Content nearby and reduce Network congestion through load balancing, Content distribution, scheduling and other functional modules of the central platform. Improve user access response speed and hit ratio.

Static resources are uploaded to the CDN, which can greatly improve access speed

Without using CDN:

Use the CDN:

It can be seen that the download degree is greatly improved after using CDN

Static resource compression. Enable GZIP compression

Compress resources such as CSS, JS, and images and enable GZIP compression on the server

As you can see, when compressed, the 1.7m source file becomes 285KB, which is a significant reduction in size

Entry chunk optimization

Split the chunk files to separate out some static libraries, which can both speed up packaging and optimize loading.

Here, we separate some static libraries: vuejs, AXIos, vuex, etc., and you can see that the browser will open multiple download threads for downloading. Without the separation of these static libraries, the portal chunk would be huge and the loading speed would be unimaginable

To separate an element-UI library from dev, we need to separate it from PROD, just remove it from vue packaging configuration:

# vue.config.js
configureWebpack: {
  externals:
    process.env.NODE_ENV === 'production'
      ? {
        'element-ui': 'element-ui',
      }
      : undefined,
},

# index. HTML manually imports static resources
<script src="/ js/element - the UI/element - UI. 2.11.1. Js." "></script>
Copy the code

My blog

END