Comments (29)
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
axios
which 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!
from realworld.
@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!!
from realworld.
@EricSimons We're reading for the peer-review. I made a PR to the starter-kit, should i submit elsewhere as well?
from realworld.
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.
from realworld.
@mchandleraz I would be happy to contribute with development of this repo. Can I send my pull-requests?
from realworld.
FYI I just added this to the homepage- keep up the great work y'all!!
from realworld.
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
from realworld.
@mchandleraz FYI I made a custom logo that you can use for the README:
from realworld.
Just set up the Gitter chatroom for this! Lets do collaborator coordination in there π
cc/ @mchandleraz
from realworld.
@michalzagrodzki feel free to make PR's β I'm sure @mchandleraz would really appreciate it!
from realworld.
from realworld.
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
from realworld.
@vilsbole just updated this issue to point at your repo! π
from realworld.
@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.
from realworld.
moment
already replaced by date-fns
on PR gothinkster/vue-realworld-example-app#18
from realworld.
@atilacamurca I can't find a way to redirect the initial repo (without an ownership change), so I updated the description and README.
from realworld.
@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.
from realworld.
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 :)
from realworld.
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
from realworld.
@mchandleraz Any updates on this? Anything we can do to help?
from realworld.
@mchandleraz the issues are disabled, can you enable back, please?
from realworld.
No worries @mchandleraz! π»
from realworld.
@vilsbole Lovely idea. When I will have some time will send pull requests.
from realworld.
@vilsbole @michalzagrodzki awesome! How is the progress going? Should I update this issue to point at your new repo? Lmk!
from realworld.
@EricSimons That would be great! It's moving forward smoothly, there are still a few tickets and it should be simple to complete.
from realworld.
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.
from realworld.
Oh geez, did I analyse the wrong repository? Sorry! :-P
from realworld.
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
from realworld.
@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!
from realworld.
Related Issues (20)
- [Bug]: Line breaks not showing correctly HOT 1
- [Bug]: Immediately signed out after logging in HOT 3
- [Backend] Remove Response Envelopes HOT 5
- [Bug]: When try to build HOT 5
- User registration success status code is 200, but docs/swagger show 201 HOT 1
- [Bug]: server ERROR 500 HOT 2
- [Bug]: CORS Error HOT 9
- [Feature Request]: offline functionality HOT 2
- [Bug]: Demo server status is 503 HOT 1
- [Feature Request]: Vuetify in Realworld example HOT 1
- [Bug]: Continuous modification of user information results in an error HOT 4
- Try this HOT 1
- [Bug]: demo APIs down? HOT 2
- [Bug] initialData.data from route loader is always undefined HOT 1
- API server doesn't work HOT 1
- [Bug]: Heroku Deployment failed
- [Bug]: API doesn't work HOT 4
- [Bug]:CORS Issue HOT 1
- [Bug]: Demo backend is down HOT 2
- [Bug]: Site Not found HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. πππ
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google β€οΈ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from realworld.