美文网首页
前端架构之路(8) - 单页面应用(SPA)、按需加载

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

作者: senntyou | 来源:发表于2018-06-15 10:14 被阅读74次

单页面应用(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 常用的路由组件

3. 按需加载

按需加载,就是按照当前呈现的不同页面加载不同的文件,而不是最开始就把所有文件都加载出来。

这样做的好处是首页第一次加载不需要把所有页面的文件一次性全部加载出来,而是只加载一些每个页面都依赖的基础库文件,从而避免首页加载很慢。

这个功能需要构建工具的支持,dynamic-imports,比如:

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

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

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

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

6. 后续

上一篇:私有 npm 仓库

下一篇:服务器端渲染(SSR)与 node 中间层

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

作者:深予之 (@senntyou)

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

相关文章

  • 前端架构之路(8) - 单页面应用(SPA)、按需加载

    单页面应用(SPA)、按需加载 1. 多页面应用 传统多页面是由后端控制一个 url 对应一个 html 文件,页...

  • 4.11 按需加载

    4.11 按需加载问题一:为什么需要按需加载? 对于采用单页应用作为前端架构的网站来说,会面临着一个网页需要加载的...

  • 框架

    什么是单页面应用(SPA)? 单页面应用(SPA)是指用户在浏览器加载单一的HTML页面,后续请求都无需再离开此页...

  • react大型项目的按需加载和代码拆分。

    REACT中的按需加载 按需加载,顾名思义,需要什么我们才加载什么资源。传统的单页应用(SPA)在首屏就会加载整个...

  • vue面试题整理

    什么是SPA应用,SPA页面和传统页面有什么区别? 单页面应用,仅在该Web页面初始化时加载相应的HTML、Jav...

  • vue单页面优缺点

    单页面应用(SPA) 单页面应用(SPA),通俗一点说就是指只有一个主页面的应用,浏览器一开始要加载所有必须的 h...

  • SPA及其优缺点

    SPA:单页面web应用,一般整个应用只有一个html页面,通过前端路由实现无刷新跳转。 Vue就是SPA应用的典...

  • SPA及其优缺点

    SPA:单页面web应用,一般整个应用只有一个html页面,通过前端路由实现无刷新跳转。 Vue就是SPA应用的典...

  • Vue Router简单版实现

    SPA(single page application) :单页面应用程序,只有一个完整的页面,加载时,不会加载整...

  • SPA、SEO、SSR

    1、SPA—单页面应用(single page application) SPA就是只有一张Web页面的应用。单页...

网友评论

      本文标题:前端架构之路(8) - 单页面应用(SPA)、按需加载

      本文链接:https://www.haomeiwen.com/subject/tlypeftx.html