69 lines
2.7 KiB
Markdown
69 lines
2.7 KiB
Markdown
### 代码体积优化
|
||
|
||
|
||
#### 公共代码提取
|
||
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`,目前支持的语言有
|
||
```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替换方法。
|
||
|