<> definition

SPA Single page application (SinglePage Web Application)
, Refers to an application with only one main page ( One html page ), It only needs to be loaded once in the beginning js,css Related resources of . All content is included in the main page , Modularize each function module . Single page application jump , It's about switching related components , Refresh local resources only .

MPA Multi page application (MultiPage Application)
, It refers to the application with multiple independent pages ( Multiple html page ), Each page must be loaded repeatedly js,css And other related resources . Multi page application jump , Full page resource refresh required .

<> difference

1. refurbish mode

* SPA: Related component switching , Page partial refresh or change
* MPA: Full page refresh
2. Routing mode

* SPA: have access to hash, It can also be used history
* MPA: Normal link jump
3. User experience

* SPA: Fast time switching between page fragments , Good user experience , When too many files are loaded for the first time , Need to do relevant tuning .
* MPA: Slow loading of page switching , Lack of fluency , The user experience is poor , Especially when the network speed is slow
4. Transition animation

* SPA: Easy to realize transition animation
* MPA: Unable to achieve transition animation
5. Data transfer

* SPA: Easy data transfer , There are many ways ( Passing values with parameters through routes ,Vuex Transfer value and so on )
* MPA: rely on url Chuanshen ,cookie, Local storage
6. Search engine optimization (SEO)

* SPA: A separate solution is required , It is difficult to realize , Not conducive to SEO retrieval , Server side rendering is available (SSR) optimization
* MPA: The implementation method is easy
7. Scope of application

* SPA: Demanding experience , Pursue the application of smooth interface
* MPA: It is suitable for the application of highly supporting search engine
8. development cost

* SPA: higher , Long term needs professional framework
* MPA: Lower , But there are also many duplicate page codes
9. Maintenance cost

* SPA: Relatively easy
* MPA: Relatively complex
10. structure

* SPA: A main page + Components of many modules
* MPA: Many complete pages
11. resource file

* SPA: Resources common to components only need to be loaded once
* MPA: Each page needs to load its own common resources