前端架構之路（8） - 單頁面應用（SPA）、按需加載

時間 2019-11-06

原文原文鏈接

單頁面應用（SPA）、按需加載

1. 多頁面應用

傳統多頁面是由後端控制一個 url 對應一個 html 文件，頁面之間的跳轉須要根據後端給出的 url 跳轉到新的 html 上。好比：html

http://www.example.com/page1 -> path/to/page1.html
http://www.example.com/page2 -> path/to/page2.html
http://www.example.com/page3 -> path/to/page3.html

多數狀況下，這種方式都是沒問題的，但對一些業務邏輯類似，重前端的應用就不是很友好了，好比系統管理應用。前端

頁面之間的跳轉須要從新加載資源，這樣就不能很好的重用公共文件，也使體驗不暢；
不能動態更新頁面的路由，由於已經被後端定義好了，更改比較麻煩；
對於 UI 相似，業務邏輯相似的頁面，不可以很好的共用代碼；
對後端來講，每添加一個頁面，都須要加一個路由，也是很麻煩的。

2. 單頁面應用

單頁面應用（single page application），就是隻有一個頁面的應用，頁面的刷新和內部子頁面的跳轉徹底由 js 來控制。vue

通常單頁面應用都有如下幾個特色：node

本地路由，由 js 定義路由、根據路由渲染頁面、控制頁面的跳轉，這是單頁面應用最基本的特色；
全部文件只會加載一次，最大限度重用文件，而且極大提高加載速度，讓 web app 有了 native app 的流暢體驗；
按需加載：單頁面應用通常都會加上這個特性。

這樣一來，整個應用便只有一個 html 文件，路由由前端控制（有時候須要後端配合），前端對應用的控制就變得遊刃有餘了。react

2.1 路由

通常來講，單頁面應用的路由從表現形式上來講分爲兩種：Hash Router 與 Browser Routerwebpack

2.1.1 Hash Router（哈希路由）

經過 location hash 定義路由。git

http://www.example.com -> path/to/main.html

http://www.example.com -> 主頁面
http://www.example.com/#/ -> 主頁面
http://www.example.com/#/page1 -> page1 頁面
http://www.example.com/#/page2 -> page2 頁面
http://www.example.com/#/page3 -> page3 頁面

這樣作的好處是後端只須要給一個 url 就能夠了，由於路由徹底是由前端實現的。github

2.1.2 Browser Router（瀏覽器路由）

經過瀏覽器連接定義路由。這個時候，每次路由就都像正常的瀏覽器連接跳轉同樣。web

這種路由須要後端配合，就是把全部須要路由的 url 都指定同一個 html 文件，由前端來根據 url 判斷怎樣渲染頁面。vue-router

http://www.example.com/page1 -> path/to/main.html
http://www.example.com/page2 -> path/to/main.html
http://www.example.com/page3 -> path/to/main.html

這樣作的好處是對搜索引擎友好，對瀏覽器的表現就像正常的 url 同樣。

2.1.3 經常使用的路由組件

react-router: for react
vue-router: for vue
page.js: Micro client-side router inspired by the Express router
director: a tiny and isomorphic URL router for JavaScript

3. 按需加載

按需加載，就是按照當前呈現的不一樣頁面加載不一樣的文件，而不是最開始就把全部文件都加載出來。

這樣作的好處是首頁第一次加載不須要把全部頁面的文件一次性所有加載出來，而是隻加載一些每一個頁面都依賴的基礎庫文件，從而避免首頁加載很慢。

這個功能須要構建工具的支持，dynamic-imports，好比：

register('page1', () => {
    import('filesOfPage1').then(() => {
        // 渲染 page1
    });
});

register('page2', () => {
    import('filesOfPage2').then(() => {
        // 渲染 page2
    });
});