<> 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
Technology