前端新人求大神给方案

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 2660 天前的主题，其中的信息可能已经有所发展或是发生改变。

问题描述：
最近开发一个中型项目，前端页面不多也不少，有些页面是重前端交互类页面（类似交易大盘，实时数据这种），得上三大框架之一才能解决（ react 全家桶，或者 angular 全家桶，或者 vue 全家桶）搞成 web app，剩下的一些页面是轻前端交互或者纯静态页面。
那么，如果整套前端搞成 react/vue/angular，那些简单静态页面的实现成本就会非常高，整个项目的开发成本随之变高，需求变更也不能敏捷的响应。现在的想法是需要搞成 web app 的一两个页面用重型框架做，那些准静态简单页用原始的，模板，后端渲染，手动引入 js 来做。
那么现在问题来了，整个前端项目工程化配置，gulp，webpack，如何分别处理重型、轻型页面？如何优雅配置和谐相处？

希望老道的前端童鞋能提供自己的方案，或者实战中的一些处理方法。谢谢

页面

前端

Vue

angular

12 条回复 • 2017-08-13 09:45:03 +08:00

FrankFang128

2017-08-12 11:42:41 +08:00

1. 多页面 + webpack 多 entry 即可。
2. 每个页面的前端路由只负责解析当前 url，不负责跳转功能
3. 这样一个，一个页面可以用 vue，也可以用 jQuery，但不要混用

MrgHOST

2017-08-12 13:07:41 +08:00

mark

zzuieliyaoli

2017-08-12 13:20:43 +08:00

其实不明白，为什么 “如果整套前端搞成 react/vue/angular ” 就会 “那些简单静态页面的实现成本就会非常高”

或者说，你这样想的理由是什么？

lovedebug

2017-08-12 13:49:38 +08:00

不要搞的太复杂。
慎重考察所有的框架：
1. 团队每个人对框架的熟悉程度？是否有现成的轮子？是否需要重开一套框架
2. 框架的性能？每天的 IP 访问量和操作量？用户规模
3. 运维的难易程度？持续集成的难易？自动化测试的难易？
4. 与后台交互的方便？
5. 是否是多节点部署的？
6. 要不要做 CDN ？静态资源完全放 CDN 好了
......

sml21

2017-08-12 14:07:26 +08:00

@zzuieliyaoli 我的场景是项目里重交互的页面占整个项目总页面数的 10%，而且重交互页面的交互非常重，轻交互页面则非常轻。以整套前端用 react 实现为例，真正发挥出 react virtual dom 功用的只有那 10%的页面，那些简单弱交互页面多为信息展示，简单信息管理，如果用 react 实现要考虑组件化，组件如何规划，前后端数据通信，前端数据存储等等一系列问题。尽管强加了这么多思维负担，到头来这些弱交互页面的效果和直接手撸 html css，10min 搞出的并没有什么体验上的提升（即使有也不需要），并且还要承担 SEO 不友好的后果（如果要搞还要考虑 ssr 直出）这些都是没有价值的思维负担、开发成本，典型的没有问题创造问题也要上。
正因为这些，才会有这个帖子。

lmqdlr

2017-08-12 14:40:26 +08:00 via Android

很简单啊，静态的就让他静着，服务端渲染模板。交互多的页面上 react，谁也没有规定用 react 的话整个项目所有页面都要用 react 吧

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 ）脚手架

zzuieliyaoli

2017-08-12 14:51:11 +08:00

@sml21 社区也可以用全家桶 -> 多页面也可以用全家桶

sml21

2017-08-12 16:04:52 +08:00

@lmqdlr 对我就是这么想的，计划多页面后端渲染为主，特殊页面用 react

这种项目的前端代码模块化、编译、合并、压缩、打包、发布 cdn 有没有什么最佳实践或者例子可以参考的？

fulvaz

2017-08-12 16:58:13 +08:00

等等...react 不是能直接放 script 标签里面用吗，就算没路由，不做成 SPA 也可以啊。

然而我觉得我没理解楼主的意思

看楼主最新回复，你可能需要搜搜 webpack boilerplate，没有的话尝试一下 github 上找找

wangchen

2017-08-12 21:03:49 +08:00

仔细读一下 webpack 文档： https://webpack.js.org/guides/code-splitting/

LeoEatle

2017-08-13 09:45:03 +08:00 via iPhone

这个应该在 Nginx 上把域名指向不同目录，建立多个工程项目，复杂的那块主功能用框架维护，其余的简单的静态宣传页就纯 js 或者 jquery，甚至是用 Ruby 一套也没关系，或者你想怎么来就怎么来。
包括 git 仓库当然也应该分开。

或者，你也可以用 Webpack 统一管理多页面，就可以在简单页面享受 import jQuery，不过配置比较繁琐，如果用了，千万不要轻易 npm install --save