Vue + Spring Boot project actual combat: personnel management system - (4) front-end performance basic optimization

foreword

  good news good news! ! ! It is really gratifying to celebrate the completion of the personnel management system project. The front and back ends are all written by myself, and the workload is indeed a lot, but the project was completed under expectations. After finishing the project, some problems still bother me, but it still gives me a certain understanding of the vue framework. Today's issue is a blog post on front-end performance optimization, let's take a look together!

step

1. Import on demand

• Direct introduction
  I believe that when using ElementUI, many people follow the way of writing on the official website

import 'element-ui/lib/theme-chalk/index.css'//没有按需导入的做法

• Import on demand
  If you don't use too many components in the project, this is a big disadvantage, and it will take up a lot of resources in the project. I have a deep understanding of this. After several pages of the project are completed, the project will often be loaded for a long time when running the npm run serve command, so importing on demand can solve this problem to a certain extent (if almost all components are used, it’s another matter), import on demand It is only very effective when using a small number of component libraries.
  Here are a few common examples to illustrate

import {
    
    
	Loading,
	Pagination,
	Dialog,
	} from 'element-ui';//按需导入了三个组件，其他未使用的组件就不会占用项目过多的资源
	Vue.use(Loading)
	Vue.use(Pagination)
	Vue.use(Dialog)

2. Routing lazy loading

  Lazy loading is also called lazy loading, that is, loading when needed, and loading as needed. In a single-page application, if lazy loading is not applied, the file packaged by webpack will be abnormally large, resulting in too much content to be loaded when entering the home page, and the delay is too long, which is not conducive to user experience. Using lazy loading Then you can divide the pages and load the pages when needed, which can effectively share the loading pressure on the homepage and reduce the loading time of the homepage.

• Basic writing

//未使用路由懒加载
import Login from '@/views/login/index'
//路由配置法
const routes: [
        {
    
    
          path: '/',
          name: 'Login',
          component: Login
        }
      ]

• Lazy loading of routes
  When it comes to lazy loading of routes, there are several loading methods. Here I will give an example to illustrate. Please learn to understand others by yourself. However, when writing in the following way,
  the advantages: it can greatly improve the response speed of the page, reduce the white screen time of the project, load the routes used in the page first, and not load the unused routes temporarily.
  Disadvantage: Each registered route will generate its own js file. If you have 10 routes, 10 registered routes will be generated, which is quite troublesome in later management.

删除import Login from '@/views/login/index'
//在路由配置表这么写
const routes: [
        {
    
    
          path: '/',
          name: 'Login',
          component: resolve => require(['@/views/login/index'], resolve),
        }
      ]

3.BootCDN

  Link: BootCDN official website
  Here is the CDN technology I use in China: BootCDN, the link is above.
  The full name of CDN is (Content Delivery Network), and its purpose is to publish the content of the website to the node closest to the user's network "edge" by adding a new layer of CACHE (caching) layer to the existing Internet, so that users The required content can be obtained nearby, and the response speed of the user's access to the website can be improved. Technically solve the reasons such as small network bandwidth, large number of user visits, uneven distribution of outlets, etc., and improve the response speed of users visiting the website.
  CDN technology is still particularly necessary, and we will continue to learn later. Before using CDN technology, when I clicked on the login page, it took at least 2 seconds to open, there was a short white screen, and the user experience was extremely bad, so I searched the Internet and used BootCDN technology to open the page At least it's much faster than before, it's almost seconds open, and the white screen effect doesn't exist anymore, it's worth my hard work all afternoon.

• Import method
  Import the js script into the index.HTML page, here you need to follow the version in your project, version dependencies can be viewed in the package.json file~

Use CDN technology in the project

• Reduce project size

After passing the build command, the size of the project has also been reduced a lot. It was several M before. For me, it is very gratifying to be able to reduce it.

4. Compress pictures

• For image processing, compression or lazy loading can be used. If there are many small icon images, you can consider using sprite images to reduce HTTP requests. For large pictures, you can consider the method of compressing pictures. Here I will give an example of compressing pictures, because I basically use large pictures in the project. The large ones reach more than 1m, and the small ones are hundreds of kilobytes. The following Recommend two URLs that can compress images.
• tinypng.com
• Lossless image compression online
  These two URLs can compress images. The first one I used is based on my own needs. After compression, my 1.8m picture was compressed to 300k, and the magic is that the picture will not be blurred, which is very comfortable. While compressing the picture, the original effect will not be lost hahaha.
  
• In addition, I recommend a vector website for everyone, which contains many small icon pictures, and you can search for any pictures you want.
• Website: Alibaba vector

Summarize

  Here, the personnel management system project has come to an end, but the harvest is still quite large. I have learned a lot of new knowledge and deepened my goal determination. Next is another new project. Come on, we can win! ! !