Froala 引入全部和按需引入的方法
in 前端 with 0 comment

Froala 引入全部和按需引入的方法

in 前端 with 0 comment

1. 导入所有组件

main.js

import 'froala-editor/css/froala_editor.pkgd.min.css'
import 'froala-editor/js/plugins.pkgd.min.js'

import VueFroala from 'vue-froala-wysiwyg'
Vue.use(VueFroala)

npm打包完后大约是1.84MB,非常大了。

2. 按需引入组件

main.js

// 编辑器基础样式和脚本
import 'froala-editor/js/froala_editor.min.js'
import 'froala-editor/css/froala_editor.min.css'

// 引入需要的组件
import 'froala-editor/js/plugins/align.min.js'
import 'froala-editor/js/plugins/code_beautifier.min.js'
import 'froala-editor/js/plugins/colors.min.js'
import 'froala-editor/css/plugins/colors.min.css'
...

import VueFroala from 'vue-froala-wysiwyg'
Vue.use(VueFroala)

实测按需引用后打包减少了约800KB的大小,非常nice。

每个Plugin对应的js和css路径可以参考官网的Plugins文档,如下图Plugin JS ScriptPlugin CSS link的路径:

image-20211108195854945-16363727376904.png

Comments are closed.