White during optimization

  1. Route lazy loading

    {
    path: '/login'.component: () = > import('@aicc/components/login/index')}Copy the code

  2. Use v-if instead of v-show

    The advantage is that you can reduce the amount of DOM rendered in the first screen (except for elements that frequently change explicit and implicit, for which you should use V-show).

  3. Components that do not display directly do lazy loading

    A common scenario is that components in the el-Tabs component that are rendered from the second TAB can be loaded lazily to reduce the amount of code that needs to be loaded to complete the first screen rendering based on this path

    Like in the VUE project

     import pageComponent from './pageComponent'

 export default {
   name: 'Recharge'.components: {
     pageComponent,
   },
 ...
Copy the code

    to

    export default {
   name: 'Recharge'.components: {
     pageComponent: () = > import('./pageComponent'),},...Copy the code

  4. Use the resolutions unified dependent version

    Assume that the main project depends on package [email protected], and the main project depends on package B depends on [email protected]. In this case, YARN installs two versions of A in node_modules root path and node_modules/B/node_modules respectively, and packages them into the final bundle. At this point, resolutions can be used to force the unified version of A in package.json

    "resolutions": {
     "a": 1.1.1 ""
 }
Copy the code

  5. Component libraries are loaded on demand

    This includes third-party component libraries used by the project, in-house component libraries, and components in the project components directory, all of which can be implemented using the babel-plugin-import plugin, babel.config.js as follows:

    const babelPluginImportForComponents = [
   'import',
   {
     libraryName: '@/components'.libraryDirectory: ' '.camel2DashComponentName: false.customName: name= > {
       return `@/components/${name}`}}]module.exports = {
   ...
   'plugins': [
     ...
     babelPluginImportForComponents
   ]
 }
Copy the code

  6. Resource preloading

    For example, a CSS package that uses Element will load the font via @font-face. This means that the font will wait for the CSS to load and start parsing. This way, we can preload the font without waiting for the CSS

    This typically deals with font resources: or any other resource that has to load the first screen while waiting for other resources to load first

  7. defer

    For js resources that have little impact on rendering, defer can be added to script so that they don’t block rendering or load, such as iconFont’s color font JS file

  8. CDN

    Part of static resources can be put on the CDN, the advantage is that the request for these resources will not bring the cookie of this website, reduce traffic. Some excellent CDN will also accelerate the loading speed of resources, such as Qiniu and Ali

  9. Reduce CSS loading

    The reason is that loading CSS blocks dom rendering because browsers build two trees to render the DOM: the DOM tree and the CSS rule tree before rendering. Load only the CSS required for the first screen, preferably with

  10. gzip

    Pack it into a Gzip package, without the server to do compression

  11. Static file cache

    Currently, front-end resources are classified using hash versions. If the hash remains the same, you can always cache the resources and set a cache policy on the server

  12. Server render/prerender

This is the ultimate killer, because accessing the URL directly requests a piece of HTML and styles that can be rendered and the rest of the resource can be loaded without blocking. It can be said that using this scheme reduces a lot of optimization effort

The first screen to optimize

In fact, the above scheme is also the first screen optimization scheme, here is to emphasize the white screen after the end of the processing

  1. Skeleton screen /loading dynamic effect

    If some content on the first screen needs to be rendered after requesting data through the interface, the skeleton screen or loading effect can be rendered first to make the user feel that the page is being loaded

  2. Back-end data layer caching

    Some frequently queried data can be set cache, such as taobao home page commodity list

  3. Picture lazy loading (can cooperate with skeleton screen scheme)

  4. Image compression

    tinyPng