Question: Reduce size? (from 876kb to ~200kb)

[1c7]

Background

My Vue.js Single Page Application(SPA) is too big (3M)

So I am tracking what make it so big

using webpack-bundle-analyzer here is my config:
webpack.config.js

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

// etc..etc...

  plugins: [
    new BundleAnalyzerPlugin()
  ],

Here is result from 'webpack-bundle-analyzer'

As you can see

tui-editor-Editor.js is big (874kb) and I don't need codemirror.js for code hight

How Do I use it?

I am using Tui.editor in a Vue Component

require("tui-editor/dist/tui-editor.css"); // editor ui
require("tui-editor/dist/tui-editor-contents.css"); // editor content
import Editor from "tui-editor";

//etc....

    this.editor = new Editor({
      el: document.querySelector("#topic_content"),
      initialEditType: "wysiwyg",
      hideModeSwitch: true, 
      language: 'zh', // 中文
      usageStatistics: false,
      toolbarItems: [
        'heading',
        'image',
      ],
      hooks: {
        addImageBlobHook: function(file, callback) {
          function callback_for_image_upload(image_url){
            let img_url = get_full_image_url(image_url);
            callback(img_url, 'image');
          }
          self.upload_file_with_callback(file, callback_for_image_upload);
        }
      }
    });

    const toolbar = this.editor.getUI().getToolbar();

    toolbar.addButton({
      name: 'heading',
      className: '',
      event: 'openHeadingSelect',
      tooltip: '标题',
      $el: $('<button class="our-button-class-heading"><img src="/static/editor-icon/editor-new/H.svg"></button>')
    }, 1);
    toolbar.addButton({
      name: 'itlic',
      className: '',
      command: 'Italic',
      tooltip: '斜体',
      $el: $('<button class="our-button-class"><img src="/static/editor-icon/editor-new/italic.svg"></button>')
    }, 2);
    toolbar.addButton({
      name: 'itlic',
      className: '',
      command: 'Bold',
      tooltip: '加粗',
      $el: $('<button class="our-button-class"><img src="/static/editor-icon/editor-new/B.svg"></button>')
    }, 2);
    toolbar.addButton({
      name: 'itlic',
      className: '',
      command: 'Strike',
      tooltip: '删除线',
      $el: $('<button class="our-button-class"><img src="/static/editor-icon/editor-new/delete.svg"></button>')
    }, 2);
    toolbar.addButton({
      name: 'hr',
      className: '',
      command: 'HR',
      tooltip: '水平线',
      $el: $('<button class="our-button-class"><img src="/static/editor-icon/editor-new/line.svg"></button>')
    }, 2);
    toolbar.addButton({
      name: 'hr',
      className: '',
      command: 'Blockquote',
      tooltip: '引用',
      $el: $('<button class="our-button-class"><img src="/static/editor-icon/editor-new/quote.svg"></button>')
    }, 2);
    // 超链接
    toolbar.addButton({
      name: 'link',
      event: 'openPopupAddLink',
      tooltip: '超链接',
      state: '',
      $el: $('<button class="our-button-class"><img src="/static/editor-icon/editor-new/link_2.svg"></button>')
    }, 2);
    toolbar.addButton({
      name: 'hr',
      event: 'openPopupAddImage',
      tooltip: '图片',
      state: '',
      $el: $('<button class="our-button-class"><img src="/static/editor-icon/editor-new/image.svg"></button>')
    }, 2);

How my app look like

Question

Is there anyway to reduce size? maybe to 200kb or so.
Thank you

[1c7]

by the way, Are you maintaining this yourself? alone? that's a lot of work.

I want heard the story of how tui.editor get started, what's the reason behind building it. haha

[acoreyj]

Looks like a large part of the code is the code highlighting, also maybe you could pull codemirror out of your own dependencies as you may have it twice.

https://bundlephobia.com/result?p=tui-editor@1.2.6

[1c7]

@acoreyj Thank you!

[1c7]

I am closing this issue.

because I am switching from tui.editor to Quill now.
Quill is more suitable for my project.

Still thank you for build tui editor and open source it 😄