New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
1c7 opened this Issue Aug 1, 2018 · 4 comments

Comments

Projects
None yet
2 participants
@1c7
Contributor

1c7 commented Aug 1, 2018

Background

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

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'

image

image

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
image

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

image

Question

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

@1c7 1c7 changed the title from Question: how reduce size? (tui editor take to Question: how reduce size? (tui editor take 800kb) Aug 1, 2018

@1c7 1c7 changed the title from Question: how reduce size? (tui editor take 800kb) to Question: Reduce size? (tui editor take 876kb) Aug 1, 2018

@1c7 1c7 changed the title from Question: Reduce size? (tui editor take 876kb) to Question: Reduce size? (from 876kb to ~200kb) Aug 1, 2018

@1c7

This comment has been minimized.

Show comment
Hide comment
@1c7

1c7 Aug 2, 2018

Contributor

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

Contributor

1c7 commented Aug 2, 2018

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

This comment has been minimized.

Show comment
Hide comment
@acoreyj

acoreyj Aug 3, 2018

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

acoreyj commented Aug 3, 2018

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

This comment has been minimized.

Show comment
Hide comment
@1c7

1c7 Aug 4, 2018

Contributor

@acoreyj Thank you!

Contributor

1c7 commented Aug 4, 2018

@acoreyj Thank you!

@1c7

This comment has been minimized.

Show comment
Hide comment
@1c7

1c7 Aug 5, 2018

Contributor

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 😄

Contributor

1c7 commented Aug 5, 2018

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 😄

@1c7 1c7 closed this Aug 5, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment