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替换方法。
|
|||
|
|
|