🖥 🔧 Vue.js about realworld

[LinusBorg]

Hi everyone,

I'm Thorsten from the Vue.js core team. I was asked to tak a look at this. Great work so far, thanks to everyone contributing!

I didn't have much time to go into the details, so I chose to take a look at the resulting bundle first, as it was mentioned to me that the bundle was surprisingly big, compared to e.g. the react example.

And in fact, the minified vendor bundle comes in with a whopping 957kB! that's quite heavy, I would say:

So I ran npm run build --report to see what gets included, and noticed a few things:

So on first sight we might realize that there are quite a lot of heavy dependencies in the vendor bundle that you won't find in the react example, whose only "external" dependenies apart from all things directly related to react&redux&router are:

{
  "dependencies": {
     "": "excluded all things react-related",
    "marked": "^0.3.6",
    "superagent": "^2.3.0",
    "superagent-promise": "^1.1.0"
  },
}

By comprison, this repositoy includes these additional dependencies:

"dependencies": {
     "": "excluded all things directly vue-related",
    "axios": "^0.16.2",
    "moment": "^2.19.2",
    "vue-axios": "^2.0.2",
    "vue-markdown": "^2.2.4",
  },

Disclaimer: all package sizes from https://bundlephobia.com

• vue-axios is fine, because it's just a thin wrapper around axioswhich we need for api requests.
• moment on the other hand, is included with all locales, adding an estimated 220kB minified to the bundle alone. the react example doesn't add any date lib at all, neither does the angular example (but angular comes with some predefined 'pipes' for that I think).
• vue-markdown heas some very heavy dependencies, and adds 528.1kB minified(!). This is mostly because it has these dependecies:

"dependencies": {
    "highlight.js": "^9.12.0",
    "markdown-it": "^6.0.1",
    "markdown-it-abbr": "^1.0.3",
    "markdown-it-deflist": "^2.0.1",
    "markdown-it-emoji": "^1.1.1",
    "markdown-it-footnote": "^2.0.0",
    "markdown-it-ins": "^2.0.0",
    "markdown-it-katex": "^2.0.3",
    "markdown-it-mark": "^2.0.0",
    "markdown-it-sub": "^1.0.0",
    "markdown-it-sup": "^1.0.0",
    "markdown-it-task-lists": "^2.0.1",
    "markdown-it-toc-and-anchor": "^4.1.2"
  }

Which is nice because it adds so much cool functionality, but makes the app super-heavy. By comparison, the markdown-lib that the react example uses only adds 17.8kB minified - markdown-it alone, without all the extensions listed above, is 88kB minified.

So by replacing vue-markdown with marked, and repacing moment with e.g. date-fns (29kB minified), or just doing it by hand, like I think the react example did, would cut down vendor bundle size from 957 to around 260 kB (with date-fns) or 230kB (with date-formatting done manually).

That would also bring this example closer to feature-parity with the other implementations, who don't support syntax highlighting, emojis, MathML, date locales and all the features that the above dependencies include (wether or not the Vue app actually uses them.

I hope this helps improving this example a fair bit, and I will look further into it this weekend (especially the actual implementation), provided I find the time between IKEA and a family birthday.

Keep up the good work!

[EricSimons]

@vilsbole so sorry about my delay here, I'm just seeing this now! I just spun up a new repo for it and added y'all to it: https://github.com/gothinkster/vue-realworld-example-app

I'm pinging Evan You now to see if he/anyone else might be able to help with the RFC 👍 Awesome work everyone!!

[vilsbole]

@EricSimons We're reading for the peer-review. I made a PR to the starter-kit, should i submit elsewhere as well?

[mchandleraz]

Sorry guys, been super busy w/ life. Just got Issues enabled, and I'm taking a look at the PRs now. Thanks for the help everyone.

[michalzagrodzki]

@mchandleraz I would be happy to contribute with development of this repo. Can I send my pull-requests?

[EricSimons]

FYI I just added this to the homepage- keep up the great work y'all!!

[mchandleraz]

Thanks for updating, Eric. I was just coming to add a link to my repo and let others know they're welcome to help. If anyone wants to join, open an Issue or hit me up on Twitter @mchandleraz so we can coordinate our efforts.

-Matt

[EricSimons]

@mchandleraz FYI I made a custom logo that you can use for the README:

[EricSimons]

Just set up the Gitter chatroom for this! Lets do collaborator coordination in there 👍

cc/ @mchandleraz

[EricSimons]

@michalzagrodzki feel free to make PR's — I'm sure @mchandleraz would really appreciate it!

[jamesbrewerdev]

I was going to recommend opening an issue on the repo. Then I realized I'm an idiot. 😄

…

On Wed, Apr 26, 2017 at 11:23 AM Átila Camurça Alves < ***@***.***> wrote: @mchandleraz <https://github.com/mchandleraz> the issues are disabled, can you enable back, please? — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#7 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AD5-rPnRv2i666r6weoljoYIOcWiRPQzks5rz4uQgaJpZM4NCTDF> .

[vilsbole]

Since @mchandleraz is MIA since a few months, I started a new fork https://github.com/vilsbole/realworld-vue
For the moment, it's simply implements Home, Articles, and Comments.
There is still a lot to do, but with your help we should be able to finish quickly

[EricSimons]

@vilsbole just updated this issue to point at your repo! 👍

[vilsbole]

@disjfa Nice article! I love the module code splitting. It would be nice to have in the project, so please feel free to submit a PR.

[atilacamurca]

moment already replaced by date-fns on PR gothinkster/vue-realworld-example-app#18

[vilsbole]

@atilacamurca I can't find a way to redirect the initial repo (without an ownership change), so I updated the description and README.

[LinusBorg]

@vilsbole agreed, date-fns is fine. The main point is to keep the number and kind of framework-independent dependencies roughly equal, so bundle sizes are comparable. It's not a bundle-size contest, but it's an important detail nonetheless.

[mchandleraz]

I've been interested in getting into Vue lately... I don't think I've got time today, but maybe over the weekend. Definitely by Monday I should have a PR. I'll update this issue once I'm done :)

[EricSimons]

Awesome! Just saw your fork of the boilerplate :)

For those out there interested in helping/watching, you can check out @mchandleraz WIP repo over at https://github.com/mchandleraz/realworld-vue

[jamesbrewerdev]

@mchandleraz Any updates on this? Anything we can do to help?

[atilacamurca]

@mchandleraz the issues are disabled, can you enable back, please?

[EricSimons]

No worries @mchandleraz! 🍻

[michalzagrodzki]

@vilsbole Lovely idea. When I will have some time will send pull requests.

[EricSimons]

@vilsbole @michalzagrodzki awesome! How is the progress going? Should I update this issue to point at your new repo? Lmk!

[vilsbole]

@EricSimons That would be great! It's moving forward smoothly, there are still a few tickets and it should be simple to complete.

[disjfa]

Just saw this, and i wanted to mention my kazoo repo, i like real world examples and am building a real world example for vue as an example. And then i found this one. In my example i mention and setup some extra code splitting in modules for each page type. Maybe useful.

I also have a couple of medium posts for explaining mt things https://medium.com/@disjfa/lets-store-some-data-in-a-vue-app-808d8b86cb79 Just for info.

[LinusBorg]

Oh geez, did I analyse the wrong repository? Sorry! :-P

[atilacamurca]

we must disable https://github.com/vilsbole/realworld-vue or redirect to https://github.com/gothinkster/vue-realworld-example-app/ to avoid this kind of confusion.

cc @vilsbole

[vilsbole]

@LinusBorg Thanks a ton for taking a look at the project!

Indeed vue-markdown is extremely heavy for the few features we use. By replacing it with marked we're now at a more reasonable size of 265kb. As for data-fns, we could do of course make a custom implementation, but unless we're enter a bundle size competition I'm in favour of not to reinventing the wheel.

Knowing that the project's code style is still heterogenous, I look forward to reading your review!