thlorenz / brace

📔 browserify compatible version of the ace editor.
http://thlorenz.github.io/brace/
MIT License
1.06k stars 304 forks source link

Reduce size of import #163

Open Dave3of5 opened 5 years ago

Dave3of5 commented 5 years ago

Using the instructions on here I've setup my Spa to use brace (I'm using Vue.Js with webpack). I found the import size of this lib is enormous (408KB):

image

Here's my code:

import * as ace from 'brace';
import 'brace/mode/json';
import 'brace/theme/chrome';

export default {
  name: 'CodeEditor',
  props: ['value'],
  data () {
    return {
      editor: null
    };
  },
  mounted () {
    this.editor = ace.edit('code-editor');
    this.editor.getSession().setMode('ace/mode/json');
    this.editor.setTheme('ace/theme/chrome');
    this.editor.setValue(this.value);
    this.editor.setShowPrintMargin(false);

    this.editor.getSession().on('change', () => {
      this.$emit('input', this.editor.getValue());
    });
  }
};

The Import * as ace is the problem here. Do you know what the minimum setup of modules I need to support the above is ?

JakeStanger commented 5 years ago

Could we also see UMD support or similar? I'm stuck including Brace in my main bundle at the moment.