bastianallgeier / triptrap

MIT License
5 stars 1 forks source link

Bundler is including vue runtime #1

Open rasteiner opened 5 years ago

rasteiner commented 5 years ago

Like you said on slack, parcel is including the vue runtime in the bundle. Actually, it seems like parcel has no other choice.

tiptap explicitly imports Vue here: https://github.com/scrumpy/tiptap/blob/master/packages/tiptap/src/Utils/ComponentView.js

I see 4 options and none of them is without drawbacks:

  1. We nag ( 😉 ) @scrumpy until he removes the dependency: Vue is imported only in that file, maybe there's a workaround
  2. We do nothing: out of the 397KB bundle, the vue runtime is 97KB: "only" about 25%
  3. The editor becomes a core feature (this would still add like 300KB to the panel)
  4. Theoretically, parcel could "alias" the "vue" module to any js file. That js file could be something like
    export default panel.Vue;

    (this requires Kirby's Vue instance to be exposed ofc)

rasteiner commented 5 years ago

About aliasing currently without changes to Kirby API.

This seems to work (see caveats) and it reduces bundle size by about 60KB

package.json

{
  /* add this */
  "alias": {
    "vue": "./vueproxy.js"
  }
}

vueproxy.js

module.exports = window._tiptap_vue_proxy;

src/index.js

import Editor from "./components/Editor.vue"

panel.plugin("getkirby/editor", {
  use: {
    exportVue: function(Vue)  {
      window._tiptap_vue_proxy = Vue
    }
  },
  fields: {
    editor: Editor
  }
})

You can see that we expose Vue from a use plugin, and by the time tiptap actually asks for it, it's there.

Caveat: This only works when building for production. When watching in dev mode, a real "vue" is needed right away to create the hot module reloading stuff. Unfortunately there doesn't seem to be a way to define aliases "only for production", so this effectively breaks the "dev mode".