V2EX 首页   注册   登录
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX  ›  程序员

前端新人求大神给方案

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

    希望老道的前端童鞋能提供自己的方案,或者实战中的一些处理方法。谢谢
    12 回复  |  直到 2017-08-13 09:45:03 +08:00
        1
    FrankFang128   71 天前   ♥ 1
    1. 多页面 + webpack 多 entry 即可。
    2. 每个页面的前端路由只负责解析当前 url,不负责跳转功能
    3. 这样一个,一个页面可以用 vue,也可以用 jQuery,但不要混用
        2
    MrgHOST   71 天前
    mark
        3
    zzuieliyaoli   71 天前
    其实不明白,为什么 “如果整套前端搞成 react/vue/angular ” 就会 “那些简单静态页面的实现成本就会非常高”

    或者说,你这样想的理由是什么?
        4
    lovedebug   71 天前
    不要搞的太复杂。
    慎重考察所有的框架:
    1. 团队每个人对框架的熟悉程度?是否有现成的轮子?是否需要重开一套框架
    2. 框架的性能?每天的 IP 访问量和操作量?用户规模
    3. 运维的难易程度?持续集成的难易?自动化测试的难易?
    4. 与后台交互的方便?
    5. 是否是多节点部署的?
    6. 要不要做 CDN ?静态资源完全放 CDN 好了
    ......
        5
    sml21   71 天前
    @zzuieliyaoli 我的场景是项目里重交互的页面占整个项目总页面数的 10%,而且重交互页面的交互非常重,轻交互页面则非常轻。 以整套前端用 react 实现为例,真正发挥出 react virtual dom 功用的只有那 10%的页面,那些简单弱交互页面多为信息展示,简单信息管理,如果用 react 实现要考虑组件化,组件如何规划,前后端数据通信,前端数据存储等等一系列问题。尽管强加了这么多思维负担,到头来这些弱交互页面的效果和直接手撸 html css,10min 搞出的并没有什么体验上的提升(即使有也不需要),并且还要承担 SEO 不友好的后果(如果要搞还要考虑 ssr 直出)这些都是没有价值的思维负担、开发成本,典型的没有问题创造问题也要上。
    正因为这些,才会有这个帖子。
        6
    lmqdlr   71 天前 via Android
    很简单啊,静态的就让他静着,服务端渲染模板。交互多的页面上 react,谁也没有规定用 react 的话整个项目所有页面都要用 react 吧
        7
    zzuieliyaoli   71 天前
    @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   71 天前
    @sml21 社区也可以用全家桶 -> 多页面也可以用全家桶
        9
    sml21   71 天前
    @lmqdlr 对我就是这么想的,计划多页面后端渲染为主,特殊页面用 react

    这种项目的前端代码 模块化、编译、合并、压缩、打包、发布 cdn 有没有什么最佳实践或者例子可以参考的?
        10
    fulvaz   71 天前
    等等...react 不是能直接放 script 标签里面用吗,就算没路由,不做成 SPA 也可以啊。

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

    看楼主最新回复,你可能需要搜搜 webpack boilerplate,没有的话尝试一下 github 上找找
        11
    wangchen   70 天前
    仔细读一下 webpack 文档: https://webpack.js.org/guides/code-splitting/
        12
    LeoEatle   70 天前 via iPhone
    这个应该在 Nginx 上把域名指向不同目录,建立多个工程项目,复杂的那块主功能用框架维护,其余的简单的静态宣传页就纯 js 或者 jquery,甚至是用 Ruby 一套也没关系,或者你想怎么来就怎么来。
    包括 git 仓库当然也应该分开。

    或者,你也可以用 Webpack 统一管理多页面,就可以在简单页面享受 import jQuery,不过配置比较繁琐,如果用了,千万不要轻易 npm install --save
    DigitalOcean
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   鸣谢   ·   1581 人在线   最高记录 3541   ·  
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.0 · 63ms · UTC 12:01 · PVG 20:01 · LAX 05:01 · JFK 08:01
    ♥ Do have faith in what you're doing.
    沪ICP备16043287号-1