传统多页面是由后端控制一个 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
多数状况下，这种方式都是没问题的，但对一些业务逻辑类似，重前端的应用就不是很友好了，好比系统管理应用。前端
单页面应用（single page application），就是只有一个页面的应用，页面的刷新和内部子页面的跳转彻底由 js 来控制。vue
通常单页面应用都有如下几个特色：node
js 定义路由、根据路由渲染页面、控制页面的跳转，这是单页面应用最基本的特色；这样一来，整个应用便只有一个 html 文件，路由由前端控制（有时候须要后端配合），前端对应用的控制就变得游刃有余了。react
通常来讲，单页面应用的路由从表现形式上来讲分为两种：Hash Router 与 Browser Routerwebpack
经过 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
经过浏览器连接定义路由。这个时候，每次路由就都像正常的浏览器连接跳转同样。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 同样。
按需加载，就是按照当前呈现的不一样页面加载不一样的文件，而不是最开始就把全部文件都加载出来。
这样作的好处是首页第一次加载不须要把全部页面的文件一次性所有加载出来，而是只加载一些每一个页面都依赖的基础库文件，从而避免首页加载很慢。
这个功能须要构建工具的支持，dynamic-imports，好比：
register('page1', () => {
import('filesOfPage1').then(() => {
// 渲染 page1
});
});
register('page2', () => {
import('filesOfPage2').then(() => {
// 渲染 page2
});
});
上一篇：私有 npm 仓库
更多博客，查看 https://github.com/senntyou/blogs
版权声明：自由转载-非商用-非衍生-保持署名（创意共享3.0许可证）