vue-markdown/optimize.md at 1e7686ee10802c287449421a3c31e08c206f20ed

2.7 KiB

Raw Blame History

代码体积优化

公共代码提取

npm包构建时，三个组件完全独立，没有抽离公共文件，所以，当同一个项目内引入其中的两个或三个组件都引入时，存在一定的重复代码，主要为highlight.js、marked、iconfont、css样式几个部分。

解决方式：将组件复制到本地项目，打包时将这些文件作为公共文件抽离出来。

注意:三个组件中使用的iconfont为同一套，如果只是单纯的使用preview组件, 将会引入整个项目所使用的iconfont,可删除iconfont的引入，重写input[type="checkbox"]的样式，preview组件体积将会减少一半，样式文件位于markdown/assets/css/index.less。

codemirror体积优化

codemirror主要分为主文件、mode相关文件和样式文件，主文件体积异常的大，mode文件目前只选用了css/jsvascript/markdown/meta/xml五个文件，其中markdown.js和meta.js为必须引用的，项目中已将常见的编程语言代码风格定义为css/js/xml之一，例如less/sass/scss按照css规则解析，html/vue按照xml规则解析。优化可从一下方面入手

减少codemirror主文件体积
减少引用的mode依赖

highlight.js体积优化

highlight.js原本体积也是较大的，主要原因为，编译时为支持各种代码语言，引入了相应的解析文件，项目内已根据常见的代码语言进行了一次筛选，进行按需引入，可根据自身需求，再次对引用文件进行删减

参见src/markdown/libs/js/hljs.js,目前支持的语言有

import hljs from 'highlight.js/lib/highlight'

import javascript from 'highlight.js/lib/languages/javascript'
import java from 'highlight.js/lib/languages/java';
import css from 'highlight.js/lib/languages/css';
import less from 'highlight.js/lib/languages/less';
import go from 'highlight.js/lib/languages/go';
import markdown from src;
import php from 'highlight.js/lib/languages/php';
import python from 'highlight.js/lib/languages/python';
import ruby from 'highlight.js/lib/languages/ruby';
import stylus from 'highlight.js/lib/languages/stylus';
import typescript from 'highlight.js/lib/languages/typescript';
import xml from 'highlight.js/lib/languages/xml';

const languages = {
    javascript,
    java,
    css,
    less,
    markdown,
    go,
    php,
    python,
    ruby,
    stylus,
    typescript,
    xml
}
Object.keys(languages).forEach(key => {
    hljs.registerLanguage(key, languages[key])
})

export default hljs;

专业版编辑器codemirror/simple.js

优化思路：无

iconfont 体积优化

只需要preview组件时，避免引入所有icon，参考功能扩展里icon替换方法。

2.7 KiB Raw Blame History Unescape Escape