前端架构之路（8） - 单页面应用（SPA）、按需加载

单页面应用（SPA）、按需加载

1. 多页面应用

传统多页面是由后端控制一个 url 对应一个 html 文件，页面之间的跳转需要根据后端给出的 url 跳转到新的 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 来控制。

一般单页面应用都有以下几个特点：

• 本地路由，由 js 定义路由、根据路由渲染页面、控制页面的跳转，这是单页面应用最基本的特点；
• 所有文件只会加载一次，最大限度重用文件，并且极大提升加载速度，让 web app 有了 native app 的流畅体验；
• 按需加载：单页面应用一般都会加上这个特性。

这样一来，整个应用便只有一个 html 文件，路由由前端控制（有时候需要后端配合），前端对应用的控制就变得游刃有余了。

2.1 路由

一般来说，单页面应用的路由从表现形式上来说分为两种：Hash Router 与 Browser Router

2.1.1 Hash Router（哈希路由）

通过 location hash 定义路由。

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 就可以了，因为路由完全是由前端实现的。

2.1.2 Browser Router（浏览器路由）

通过浏览器链接定义路由。这个时候，每次路由就都像正常的浏览器链接跳转一样。

这种路由需要后端配合，就是把所有需要路由的 url 都指定同一个 html 文件，由前端来根据 url 判断怎样渲染页面。

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
    });
});

4. 常见的单页面应用组合

• react 全家桶：react + react-router + redux + redux-saga + react-redux + dva

5. react 全家桶 + ant-design 开发模板

• ant-design-pro
• antd-admin

6. 后续

上一篇：私有 npm 仓库

下一篇：服务器端渲染（SSR）与 node 中间层

更多博客，查看 https://github.com/senntyou/blogs

作者：深予之 (@senntyou)

版权声明：自由转载-非商用-非衍生-保持署名（创意共享3.0许可证）