这是一个创建于 2448 天前的主题，其中的信息可能已经有所发展或是发生改变。
问题描述：
最近开发一个中型项目，前端页面不多也不少，有些页面是重前端交互类页面（类似交易大盘，实时数据这种），得上三大框架之一才能解决（ react 全家桶，或者 angular 全家桶，或者 vue 全家桶）搞成 web app，剩下的一些页面是轻前端交互或者纯静态页面。
那么，如果整套前端搞成 react/vue/angular，那些简单静态页面的实现成本就会非常高，整个项目的开发成本随之变高，需求变更也不能敏捷的响应。现在的想法是需要搞成 web app 的一两个页面用重型框架做，那些准静态简单页用原始的，模板，后端渲染，手动引入 js 来做。
那么现在问题来了，整个前端项目工程化配置，gulp，webpack，如何分别处理重型、轻型 页面？如何优雅配置和谐相处？
希望老道的前端童鞋能提供自己的方案，或者实战中的一些处理方法。谢谢
最近开发一个中型项目，前端页面不多也不少，有些页面是重前端交互类页面（类似交易大盘，实时数据这种），得上三大框架之一才能解决（ react 全家桶，或者 angular 全家桶，或者 vue 全家桶）搞成 web app，剩下的一些页面是轻前端交互或者纯静态页面。
那么，如果整套前端搞成 react/vue/angular，那些简单静态页面的实现成本就会非常高，整个项目的开发成本随之变高，需求变更也不能敏捷的响应。现在的想法是需要搞成 web app 的一两个页面用重型框架做，那些准静态简单页用原始的，模板，后端渲染，手动引入 js 来做。
那么现在问题来了，整个前端项目工程化配置，gulp，webpack，如何分别处理重型、轻型 页面？如何优雅配置和谐相处？
希望老道的前端童鞋能提供自己的方案，或者实战中的一些处理方法。谢谢
 |
1
FrankFang128 2017-08-12 11:42:41 +08:00  1
1. 多页面 + webpack 多 entry 即可。
2. 每个页面的前端路由只负责解析当前 url，不负责跳转功能 3. 这样一个，一个页面可以用 vue，也可以用 jQuery，但不要混用 |
 |
2
MrgHOST 2017-08-12 13:07:41 +08:00
mark
|
 |
3
zzuieliyaoli 2017-08-12 13:20:43 +08:00
其实不明白，为什么 “如果整套前端搞成 react/vue/angular ” 就会 “那些简单静态页面的实现成本就会非常高”
或者说，你这样想的理由是什么？ |
 |
4
lovedebug 2017-08-12 13:49:38 +08:00
不要搞的太复杂。
慎重考察所有的框架： 1. 团队每个人对框架的熟悉程度？是否有现成的轮子？是否需要重开一套框架 2. 框架的性能？每天的 IP 访问量和操作量？用户规模 3. 运维的难易程度？持续集成的难易？自动化测试的难易？ 4. 与后台交互的方便？ 5. 是否是多节点部署的？ 6. 要不要做 CDN ？静态资源完全放 CDN 好了 ...... |
 |
5
sml21 OP @zzuieliyaoli 我的场景是项目里重交互的页面占整个项目总页面数的 10%，而且重交互页面的交互非常重，轻交互页面则非常轻。 以整套前端用 react 实现为例，真正发挥出 react virtual dom 功用的只有那 10%的页面，那些简单弱交互页面多为信息展示，简单信息管理，如果用 react 实现要考虑组件化，组件如何规划，前后端数据通信，前端数据存储等等一系列问题。尽管强加了这么多思维负担，到头来这些弱交互页面的效果和直接手撸 html css，10min 搞出的并没有什么体验上的提升（即使有也不需要），并且还要承担 SEO 不友好的后果（如果要搞还要考虑 ssr 直出）这些都是没有价值的思维负担、开发成本，典型的没有问题创造问题也要上。
正因为这些，才会有这个帖子。 |
 |
6
lmqdlr 2017-08-12 14:40:26 +08:00 via Android
很简单啊，静态的就让他静着，服务端渲染模板。交互多的页面上 react，谁也没有规定用 react 的话整个项目所有页面都要用 react 吧
|
|
7
zzuieliyaoli 2017-08-12 14:49:49 +08:00
@sml21 你的意思是说：10% 复杂页面的思维负担，而且 10% 复杂页面的思维负担 对 90% 简单页面没有什么卵用。
不管怎样，你用不用全家桶，“组件化，组件如何规划，前后端数据通信，前端数据存储” 这几个问题也是绕不过的吧？ 那么为什么不用全家桶去无痛解决这些问题呢？ 我的建议是，要么做成纯单页面，要么纯多页面。不然，单页面与多页面混用，之间的页面跳转、权限判断、代码（ CSS、JS ）复用，够你头疼的。 当然，社区也可以用全家桶，而且也有很多模板。 可以看我写过的一篇文章 http://www.liyaoli.com/2017-05-06/vue-multi-pages-application-boilerplate-modified-by-vue-cli.html 基于 Vue-cli 构建多页面应用（ Multi-pages Application ）脚手架 |
|
8
zzuieliyaoli 2017-08-12 14:51:11 +08:00
@sml21 社区也可以用全家桶 -> 多页面也可以用全家桶
|
|
9
sml21 OP |
 |
10
fulvaz 2017-08-12 16:58:13 +08:00
等等...react 不是能直接放 script 标签里面用吗，就算没路由，不做成 SPA 也可以啊。
然而我觉得我没理解楼主的意思 看楼主最新回复，你可能需要搜搜 webpack boilerplate，没有的话尝试一下 github 上找找 |
 |
11
wangchen 2017-08-12 21:03:49 +08:00
仔细读一下 webpack 文档： https://webpack.js.org/guides/code-splitting/
|
 |
12
LeoEatle 2017-08-13 09:45:03 +08:00 via iPhone
这个应该在 Nginx 上把域名指向不同目录，建立多个工程项目，复杂的那块主功能用框架维护，其余的简单的静态宣传页就纯 js 或者 jquery，甚至是用 Ruby 一套也没关系，或者你想怎么来就怎么来。
包括 git 仓库当然也应该分开。 或者，你也可以用 Webpack 统一管理多页面，就可以在简单页面享受 import jQuery，不过配置比较繁琐，如果用了，千万不要轻易 npm install --save |
Select Language