SPA single-page application : refers to an application with only one main page, and only needs to load css, js and other related resources once at the beginning. All content is contained in the main page, and each functional module is componentized. Single-page application jump is to switch related components, just refresh local resources
MPA multi-page application : refers to an application with multiple independent pages, and each page must reload js, css and other related resources. Multi-page application jumps require a full-page resource refresh
the difference:
1. Refresh method
- SPA: switching of related components, partial page refresh or change
- MPA: Full page refresh
2. Routing mode
- SPA: You can use hash or history
- MAP: ordinary link jump
3. User experience
- SPA: The user experience is good, and the page knowledge partial refresh component is switched. Because all resources are loaded at once, there may be a white screen for a while when you enter for the first time
- MPA: The loading of page switching is slow, the fluency is not enough, and the user experience is relatively poor
4. Special animation
- SPA: Easy to realize special animation.
- MPA: Special animation cannot be realized.
5. Data transmission problem
- SPA: easy to transfer data, there are many methods, such as Vuex
- MPA: It is inconvenient to transfer data, generally use url/cookie/local storage
6. Search Engine Optimization (SEO)
- SPA: requires a separate solution, which is difficult to implement
- MPA: Easy way to implement
7. Scope of use
- SPA: high-demand experience, the pursuit of smooth page
- MPA: Used in the pursuit of highly supportive search engine applications
8. Development costs
- SPA: Higher because of the need for a framework.
- MPA: lower, but more code
9. Maintenance costs
- SPA: relatively low
- MPA: relatively high
10. Structure
- SPA: One main page + many module components
- MPA: Many Complete Pages
11. Resource files
- SPA: resource files common to components only need to be loaded once
- MPA: Each page needs to load its own resources