This paper is participating in thePerformance optimization combat record”Topic essay activity

Do you know how long your project will take to load first? Have you made any performance improvements on your own projects?

According to statistics, 53% of users will not wait more than 3 seconds before closing the page, so the performance optimization of the project is particularly important.

Without further ado, today we’ll take a closer look at how to optimize the performance of a Vue project.

Analyze the project bundle size

The size of the packaged files directly affects the loading speed of our access, so we need to know which packaged files have performance problems.

There are two main ways to view the bundle size

report

Using Webpack-bundle-Analyzer to generate a report, you can clearly see the size of each packed file

We add the following command to the package.json file of the Vue project

"build-report": "vue-cli-service build --report"
Copy the code

Then, run it from the command line

npm run build-report
Copy the code

After waiting some time, a report.html file is generated in the dist file, which we open in a browser

build

Use the build package command locally

npm run build
Copy the code

Then look at the output of the terminal

You can see the main files sorted from largest to smallest

After reviewing the key information, we can do some optimization measures

1. Lazy module loading

Such as Echarts icon package, the package and editor are great with 4500 KB, but not all pages need charts and editor, only a few pages need, so we can put Echarts and editor in need in the page to load, not on the global, so other pages will save loading their time.

To see the order in which the browser loads files, open the browser’s developer tools, click Network, check Disable Cache so that files are not loaded from the browser’s cache, and then refresh the page to see the order in which all files are loaded

The way I usually introduce modules is this

// demo.js
const Demo = {
  testDemo: function () {
    console.log("This is a DEMO." ")}}export default Demo

// app.js
import Demo from './demo.js'
Demo.testDemo()
Copy the code

Write this using lazy loading

// app.js
const getDemo = () = > import('./demo.js')

// Lazy loading
getDemo()
  .then({ testDemo } => testDemo())
Copy the code

Lazy loading is a very good solution to the problem of too large bundles. Some functions that users do not often use are put into lazy loading, which can be loaded when users click or scroll the visual area.

2. Route lazy load splitting

In general, our route might be written like this, which is written to package all the Dashboard component and Contact component code into JS.

// routing.js
import Dashboard from './Dashboard.vue'
import Contact from './Contact.vue'

const routes = [
  { path: '/'.component: Dashboard }
  { path: '/contact'.component: Contact }
]
Copy the code

We can load lazily according to the route, instead like this

// routing.js 
const routes = [
  { path: '/'.component: () = > import('./Dashboard.vue')} {path: '/contact'.component: () = > import('./Contact.vue')}]Copy the code

The advantage of this is that we do not load the contact. vue code without accessing the route /contact, and only load the component code when we do.

Bundle multiple pages into a bundle via webpackChunkName

/* webpackChunkName:’ group-superadmin ‘*/ You need to define the name of webpackChunkName.

const router = [
  {
    path: 'superAdminAccountList'.name: 'SuperAdminAccountList'.component: () = > import(/* webpackChunkName:'group-superAdmin' */ '@/activity/superAdmin/AccountList'),}, {path: 'superAdminCreateAccount'.name: 'SuperAdminCreateAccount'.component: () = > import(/* webpackChunkName:'group-superAdmin' */ '@/activity/superAdmin/CreateAccount'),}, {path: 'superAdminRoleList'.name: 'SuperAdminRoleList'.component: () = > import(/* webpackChunkName:'group-superAdmin' */ '@/activity/superAdmin/RoleList'),}, {path: 'superAdminCreateRole/:id? /:look? '.name: 'SuperAdminCreateRole'.component: () = > import(/* webpackChunkName:'group-superAdmin' */ '@/activity/superAdmin/CreateRole'),},];Copy the code

3. Prefetch prerender components

Prefetch is a mechanism to use the browser’s idle time to load resources that the page may use in the future; It can usually be used to load resources required by other pages other than the home page to speed up the first screen of subsequent pages.

Webpack makes it very easy to pre-render components. By adding /* webpackPrefetch: true */, WebPack automatically adds ** tags to the page.

components: {
  ModalView: () = > import(/* webpackPrefetch: true */ './ModalView.vue')}Copy the code

4. Optimize third-party library dependencies

We usually use some third-party dependency libraries in our projects, such as LoDash

It would be huge if we introduced the whole thing, but we might only use one or two functions, and we just need to reference what we need

import isEmpty from 'lodash/isEmpty`
Copy the code

5. Use the browser cache

We all know that when we visit a website, the browser will cache the JS and CSS and retrieve the file from the cache the next time we visit it, without having to request it again. So you might ask the browser cache we can’t control, right? How do we do that?

So we usually pack things like this

  • Main. [hash].js – Root component
  • Common. [hash].js – Common component
  • Dashboard. [hash].js – Dashboard page
  • Contact.[hash].js – The contact page

In fact, we can put some common code dependencies in common.[hash].js that we don’t need for a long time.

6. Optimize compressed images

Image size is also critical to project performance, and generally WebPack helps reduce network requests by converting small images directly to Base64. For other images, we also need to compress them, and there are two general compression methods

  1. Use software for compression
  2. Use CDN for file compression

I recommend using TinyPNG, an online site that compresses with almost no loss of sharpness and works extremely well.

Using CDN compression, general professional file storage will provide image processing functions such as JINGdong picture address, the middle S280X280 can modify the width and height of the picture, the rear. Webp suffix to convert JPG images into webP format, further to reduce the size of the file.

https://img30.360buyimg.com/seckillcms/s280x280_jfs/t1/187871/40/5785/69529/60b4af7dE5a50eaff/c235bb87f19c1698.jpg.webp
Copy the code

7. CDN on static files

Generally, small companies may directly upload CSS, JS, pictures and other files to the server for convenient access. The advantage of using CDN is that there will be service nodes in all parts of the country during CDN, and CDN also cache files, so it is several times faster to access static files through CDN and directly access server files.

Taobao’s picture access, 98% of the flow has gone CDN cache. Only 2% are returned to the source site, saving a lot of server resources.

conclusion

Through the above operation, the loading of the first screen of our project is almost the same as that of Taobao and JD.com. There are other optimization methods, please tell me in the comment section, we can learn from each other.

If this article is helpful, wechat search [xiaoshuai’s programming notes], a little knowledge every day