Home Sign Up Sign In
爱意满满的作品展示区。
Advertisement
lijy91

我用 Vue2 全家桶重写「daza.io」的前端

  •   
  •   lijy91 · Jan 8, 2017 · 8706 views
    This topic created in 3586 days ago, the information mentioned may be changed or developed.

    文章固定链接： https://daza.io/articles/58303

    在发布第一版的 daza.io 的时候 Vue 2 已经发布了，但当时的进度已经快完成了，所以就没有立即升级到 Vue 2 。

    在把用 Vue 1 写的版本全部推翻重写的时候参考了大量项目，并且更好的理解了 Vuex 等技术。

    欢迎大家通过首页的 DaoVoice 按钮给我提建议和反馈。

    主页：https://daza.io 接口：https://api.daza.io

    截图

    技术栈

    使用了变态严格的 airbnb 的规范进行代码检查，所以整个项目的代码可读情还是很高的

    • vue 2
    • vue-router 2
    • vuex 2
    • vue-resource
    • marked
    • highlight.js
    • simplemde
    • ...

    功能

    • Markdown 支持
    • 七牛图片上传支持
    • Vue 与 jQuery 的混用
    • 等等

    获取源码

    https://github.com/lijy91/daza-frontend https://github.com/lijy91/daza-backend https://github.com/lijy91/daza-ios https://github.com/lijy91/daza-android

    讨论组

    如果你对 daza.io 感兴趣，或者对我使用的技术有兴趣，欢迎加入讨论组。

    Supplement 1  ·  Jan 11, 2017
    感谢各位的吐槽，现在将引用的第三方库全部指向了 https://staticfile.org （之前全部合并进 vendor.js 里了） ，现在访问速度应该是比较正常了。
  • Vue
  • vuex
  • 重写
  • 代码
    36 replies  •  2017-01-14 20:14:59 +08:00
    realpg
    realpg
    Jan 8, 2017❤️4
    1
    东北人表示无法直视你网站这个名字……
    kimwang
    kimwang
    Jan 8, 2017
    2
    感觉不错，收藏了慢慢看。
    Kilerd
    Kilerd
    Jan 8, 2017
    3
    搞不懂你们为什么要用 js 前段框架，明明可以用传统的那种方式工作的。

    打开你的网站，就当当 js 和 css 就跑了 2 M 。 又不上 CDN 。

    如果是手机，我绝对不会打开这样的网站。

    这大概就是为什么 以前 100M 流量都绰绰有余，现在 几个 G 都随随便便没了。
    murmur
    murmur
    Jan 8, 2017
    4
    单从第一页 看 bootstrap+内容管理系统+cdn 完美符合要求 以后还可以自己玩换肤
    lijy91
    lijy91
    OP
    Jan 8, 2017 via iPhone
    5
    @murmur 用的并不是 bootstrap
    lijy91
    lijy91
    OP
    Jan 8, 2017 via iPhone
    6
    @Kilerd 只能说明我的前端优化技术还不到家。
    murmur
    murmur
    Jan 8, 2017
    7
    @lijy91 然而我说这个需求 bootstrap 做前端 后台上个 wordpress 简直完美啊
    mimzy
    mimzy
    Jan 8, 2017
    8
    @realpg 我懂你的点 hhh
    bayallen
    bayallen
    Jan 8, 2017
    9
    感觉这种以内容为主的网站， SEO 很重要啊。

    请问楼主如何解决 SEO 的问题？
    scnace
    scnace
    Jan 8, 2017 via Android
    10
    @Kilerd 100m 就有点过分了🌚🌚
    lijy91
    lijy91
    OP
    Jan 8, 2017
    11
    @ferrum 准备上服务端渲染！！
    shakespaces
    shakespaces
    Jan 8, 2017 via Android
    12
    @realpg 233333 你不说我还没联想
    carlton
    carlton
    Jan 8, 2017
    13
    首页进入好慢, 包的体积太大了, vendor 包竟然 1M 多, 感觉你应该哪里压缩出问题了. 然后可以基于 vue-router 做按需加载的
    scarlex
    scarlex
    Jan 8, 2017
    14
    我加载完网站花了 22 秒
    juneszh
    juneszh
    Jan 8, 2017❤️1
    17
    楼主尝试新生事物的积极心态 还是要给予鼓励的

    我们前几个月也用 Vue 来完成了一个社交项目

    但是我觉得有个观点必需提出

    当今流行的 JS 框架的出现 并不是为了重现以前很简单就能完成并且已有很多成熟架构的东西

    所以前面会有那么多人吐槽

    WebAPP 或者 HybridApp 才是主要的表现舞台 更能发挥他们的价值
    livelazily
    livelazily
    Jan 8, 2017
    18
    网页没开启 Gzip, Semantic css 没用 min 版
    toddlt
    toddlt
    Jan 8, 2017
    19
    @realpg 就服你
    shiye
    shiye
    Jan 8, 2017
    20
    你这个首页给我优化可以搞到总体积 200k
    lijy91
    lijy91
    OP
    Jan 8, 2017 via iPhone
    21
    @shiye 欢迎给提 PR ！
    shiye
    shiye
    Jan 8, 2017
    22
    @lijy91 要把对 Semantic-UI 和 jquery 的依赖去掉才行，不过你自己弄个博客闹着玩，不需要费这么大劲优化
    afwefww
    afwefww
    Jan 8, 2017
    23
    网站好漂亮，可是有一点点慢。我这里是小水管，花了 1.4 分钟下载了 3.4MB 素材才完全加载完首页（好一点的网络应该不会这么慢）。

    但是同样条件下打开这个网站只需要不到 4s （我这里网络环境太差 ><），仅下载 不到 100KB 数据就可打开首页：

    http://suo.im/nPdwN
    afwefww
    afwefww
    Jan 8, 2017
    24
    补充：我这里打开本论坛首页需要 16s ，下载 800KB 内容。仅供参考。
    sox
    sox
    Jan 8, 2017
    25
    @Kilerd https://infernojs.org/about

    > Inferno started as an idea two years ago, to see if a UI library could really improve the experience, battery, memory usage and performance on mobile devices. At the time we really struggled to get good performance on any UI library/framework at the time – it simply wasn't happening, **we spent a huge amount of time writing lots of vanilla JavaScript code and it did the job – but it was a mess.**
    mingyun
    mingyun
    Jan 8, 2017
    26
    厉害了
    nfroot
    nfroot
    Jan 9, 2017
    27
    @Kilerd 我来回答！

    之前用火车头把几十万页面数据采出来（备份），发现严重的问题就是页面太大了，严重影响了采集速度。

    那时候我就想，要是能用前端框架，其他内容都不用重复载入（指 JS,CSS,多页面共用 HTML ，前面那个最大的影响也是.net 生成的一个很大的没用的隐藏 input 数据字段），那该多好啊……（能节省流量，载入速度也上几个层次，国内小 VPS 这么贵，国外那么慢，意义还是很大的）

    后来……发现前端框架这么好，但是复杂度也高，还要学最新的 JS 以及一堆附加的东西，完全不是我一个 JS 新手能玩得转的……

    如果不是重度用户或者前端程序员，要简单粗暴用上来真不是那么容易的事情。花费这么大精力去学习，或许有点代价太高。

    何况一升级版本又出来一大堆不兼容的东西。

    但是对于重度用户和前端程序员来说，确实强大好用，让他们折腾去吧。
    lwbjing
    lwbjing
    Jan 9, 2017
    28
    不管你用了什么技术。。
    一个网页，首屏打开 66 个请求， 3.4MB 的资源，我这边强刷了几次基本上都 35s+才加载完成。。
    这个是要打回去重做的。。
    sheep3
    sheep3
    Jan 9, 2017
    29
    慢的惊人。.......
    BoiledEgg
    BoiledEgg
    Jan 9, 2017
    30
    一篇文章而已，加载完 3.4MB ，用时 21.04s ， nginx 也没开 gzip
    irrigator
    irrigator
    Jan 9, 2017
    31
    推荐楼主看看 Nuxt.js ( https://nuxtjs.org)，评论区的大部分抱怨都能解决掉~
    hronro
    hronro
    Jan 9, 2017
    32
    花了几分钟才打开的😂

    感觉 vue 不是这么玩的
    ctsed
    ctsed
    Jan 9, 2017
    33
    3.5M 20 秒
    lijy91
    lijy91
    OP
    Jan 11, 2017
    34
    优化了一下，现在的打开速度应该会快了不少。
    jsq2627
    jsq2627
    PRO
    Jan 12, 2017
    35
    @lijy91 依旧不开 gzip ，没优化到重点啊
    fhefh
    fhefh
    Jan 14, 2017
    36
    nice mark
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Privacy   ·   Solana   ·   3085 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 66ms · UTC 10:47 · PVG 18:47 · LAX 02:47 · JFK 05:47
    ♥ Do have faith in what you're doing.