Vue The difference between single page and multi page

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

• « 上一篇： Low version Xcode There is no up to date DeviceSupport How to debug the real machine when file
• » 下一篇：java： Array and its common algorithms