Vue optimization

  1. Vue-router lazy loading: Vue asynchronous components, Webpack require.ensure(), ES6 import,
  2. Load the UI library on demand
  3. If the first screen is a login page, multiple entries can be made
  4. The page uses the Skeleton Screen
  5. Server side rendering SSR (generating HTML strings from components or pages through the server, sending them to the browser, and finally “blending” static markup into a fully interactive application on the client side)

Network optimization

  1. Reduce the number of HTTP requests
  2. Take advantage of the browser cache and reducecookieSize, use as much as you canlocalStorageInstead of
  3. CDN acceleration, hosting static files
  4. Enable Gzip compression: Enable Gzip compression for Nginx cache and Webpack

Js optimization

  1. Throttling and anti-shaking
  2. Dynamic loading, paging loading (big data rendering)
  3. Image lazy loading (data-src) reduces network bandwidth
  4. When using closures, manually remove unwanted local variables at the end of the function, especially if dom nodes are cached
  5. Async parses the DOM tree and loads js at the same time. After loading, suspend parsing the execution JS. Defer parses the DOM tree and loads js at the same time, and executes JS after parsing

CSS optimization

Do not use CSS expressions

Reduced backflow (rearrangement)

Avoid deep nesting of CSS files

SEO optimization

Highlight important content – reasonable design of title, description and keywords

Write HTML code semantically, conforming to W3C standards

Add Alt and title attributes to the image img tag

Add the title attribute to the link in-page tag

The H1 tag has its own weight