I wrote an article about tuning vuE-CLI (at an entry-level level), and there are some tuning tips THAT I took in the beginning of development. Time flies, and recently optimized some projects, some new ideas to share with you.

Before optimization

The optimized

Optimizations in index.html

Prefetch indicates dns-prefetch and preconnect

prefetch

The keyword prefetch, as the value of the attribute rel of the element, is to remind the browser that the user may need to load the target resource when browsing in the future. Therefore, the browser may optimize the user experience by obtaining and caching corresponding resources in advance. MDN

The above paragraph ends at MDN and may be a bit of a mouthful. A quick explanation: The link tag rel= Prefetch tells the browser which resources can be loaded at idle time. For example, if you pull resources from the first screen first, and then automatically pull other resources when free, the speed of the site will certainly be much faster. This is primarily webpack’s responsibility

dns-prefetch

Dns-prefetch is an attempt to resolve a domain name before requesting a resource. This could be a file to load later, or it could be the target of a link the user is trying to open. MDN

This paragraph is easy to understand much, is in advance to the DNS resolution of the domain name of three parties. This is useful when we need to reference tripartite libraries. Let’s say you want to quotewww.jsdelivr.com/Last package, you can DNS resolve this address in advance, which can speed up the loading of the third-party CDN library. This is slightly less compatible and is recommended for use with Preconnect

preconnect

Preconnect allows the browser to perform several actions prior to an HTTP request being formally sent to the server, including DNS resolution, TLS negotiation, and TCP handshake, which eliminates round-trip latency and saves the user time.

I have not found this document in MDN, it may be an experimental function, but the compatibility is ok.

2 ways to lazily load CSS

Some CSS can also block rendering of web pages, so lazy loading is best. There are two ways to lazy loading

  • The link tag
<link media="none" onload="this.media='all'" href="<%= BASE_URL %>fonts/LuckiestGuy/index.css" rel="stylesheet">
Copy the code
  • Js code

const lazyCss = (href)=>{
  const link = document.createElement('link')
  link.setAttribute('rel', 'stylesheet')
  link.setAttribute('href', href)
  link.setAttribute('type','text/css' )
  document.querySelector('head').appendChild(link)
}
Copy the code

I usually execute in app. vue created or mounted on the first page

Optimizations in main.js

Lazy loading of NPM packages with @babel/plugin-syntax-dynamic-import

In fact, the native ESM in browsing supports original loading and returns a promise such as:

import('xxx.js')
    .then(module=>{
       console.log(module)
    })
Copy the code

But this feature is best used with the Babel plug-in.

Optimizations in components

Manually specify the package file name when lazy loading

const CheckinAlert=()=>import(/* webpackChunkName: "alert" */'@/themeComponents/theme3/checkinAlert.vue'),
Copy the code

A tip for Webpack packaging, it is recommended to separate by page

Optimization at packaging time

Reduce the size of vendor

This is code from another website that essentially wraps each node_modules library separately

configureWebpack: config=>{ config.optimization.splitChunks.cacheGroups.vendors={ name(module){ const packageName = module.context.match(/[\/]node_modules[\/](.*?) ([\/]|$)/)[1].toLowerCase() return `package.${packageName.replace('@', '')}` } } }Copy the code

However, some third-party libraries are so small, sometimes less than 1KB, that packing them into a single JS creates too many HTTP requests. So I changed it a little bit here, merging by quantity. Because my level is limited, so write very simple and rough, if you have better suggestions, please feel free to comment.

const packNameList = new Array(60).fill('').map((e,i)=>({name:`package${i}`,count:0})) configureWebpack: config=>{ config.optimization.splitChunks.cacheGroups.vendors={ name(module){ const packageName = module.context.match(/[\/]node_modules[\/](.*?) ([\/]|$)/)[1].toLowerCase() const index = packNameList.findIndex(e=>e.count<=15) if(index> -1&&packageName.indexOf('vue')===-1){ const one = packNameList[index] packNameList[index].count = packNameList[index].count+1 return one.name } return `package.${packageName.replace('@', '')}` } } }Copy the code

The above is some optimization summary I have done recently, I hope we can discuss and progress together