Dynamic and asynchronous components

Dynamic component

Vue.js provide a special element <component>used to dynamically loading a different component, using isproperties can be provided to mount the components

Application scenarios:

Asynchronous component

In large applications, we may need to divide the application into smaller code blocks and load a module from the server only when needed.

• Project packaging :npm run build
  • Generate a project under the root distfolder
    • css: All packaged style files in the current project
    • js: The current project in the package all jsfiles
      • app.jsAll srcresults of the directory content packaging
      • app.js.map: The mapping file of the above file
      • chunk.js: All third-party packaged files
      • chunk.js.map: The mapping file of the above file
    • index.html: The static page of the project

Question :

• Performance: The packaged project, after running, will load all the files in the current project in one go
• Impact: The first time the page is loaded, it will be very slow and the user experience will be poor.
• solution:
  • Asynchronous components can be used to solve this problem

usage:

• Synchronization components :
  • Import method:

		import login from './login.vue'

• Features :
  • When packaging, it will be packaged into app.js
  • When requesting a page, it will be requested along with app.js
• Asynchronous component
  • Import method :

		 const login = () => import('./login.vue')

• Features :
  • When packaging, it will not be packaged into app.js, but will be separately packaged as a js file
  • When the page is requested, it will be loaded only when the request arrives

Note :

• If you use a component in vue, its name is: asynchronous component
• If used in routing , its name is: routing lazy loading