1. 导入所有组件
main.js
1
2
3
4
5
| 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
1
2
3
4
5
6
7
8
9
10
11
12
13
|
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 Script和Plugin CSS link的路径：
![]()
