Suggestion: make it easier to only include some components

[larsenwork]

As the title says — currently the webpack bundle when using default eagle.js becomes quite big (I think mine jumped from ~90kb to ~700kb). The biggest culprit is the highlight.js dependency but ideally any component besides the main slideshow and slide component should only be included if explicitly imported/used.

[larsenwork]

So the component part seems to be solved in https://github.com/Zulko/eagle.js/commit/be034c7134eabef723137f7c3b2e31b67759168a but highlight.js is still included even if one only uses slideshow, slide and transition components.

[yaodingyd]

@larsenwork Because hightlight.js is still a dependency to eagle.js. To remove the hard dependency I'm thinking two ways:

1. expose a prop on eg-code-comment for user to hook in their own highlight.js per instance
2. expose an option on eagle.js for user to hook in hightlight.js globally

What do you think?

[larsenwork]

Not sure what would be the best approach — my issue is not that I want to use "my own" highlight.js — it's that I don't need it at all.

I wonder if there's a way to make sure the es6 build is structured in separate files instead of only one eagle.es.js file — this way webpack (or whatever the user is using) should be able to only include highlight.js if one imports the codeComment/Block component.

[yaodingyd]

Personally I don't like this approach. It would break how current import works. Currently you can import default to install all components, but your suggestion would make import looks like:

import Eagle from 'eagle.js'
import CodeBlock from 'eagle.js/dist/widgets/CodeBlock'
//... all other widgets

Vue.use(Eagle)
Vue.use(CodeBlock)
//... install all other widgets

There is no way to default import all components, and importing each widget is just a pain.

You can achieve importing widgets only from main entry but it needs some other babel plugin, like this http://element.eleme.io/#/en-US/component/quickstart#on-demand

Also I think it is reasonable to move highlight.js (along with animate.css) out of eagle.js's control and give it to user.

[yaodingyd]

@larsenwork any followup thoughts?

[larsenwork]

Sorry, I'm not too experienced in creating vue components — but yeah, moving out highlight.js and animate.css seems like a very good idea :)

[yaodingyd]

Fixed in 0.3.0 release.