@toast-ui/editor配置cdn

---

背景

---

最近用vue3开发完成项目打包的时候，发现有些模块占用的体积很大，通过webpack-bundle-analyzer分析工具我们可以看到打包后@toast-ui/editor整整都快1M了，思索半天决定采用cdn化，减少体积

vue版本：3.2.26
@toast-ui/editor版本：3.0.2

---

1、在vue.config.js配置对应的js、css资源

---

**

不要从jsdelivr里面去引入，下面会说为什么

**

在vue.config.js中configureWebpack选项里面的externals里面进行配置，然后在index.html中引入@toast-ui/editor
的css、js文件即可。这里就不做过多介绍了，不知道了可以自行去百度

现在说下为什么不要从jsdelivr引入，刚开始引入的时候是报错的，并且在对应的页面你是不能这样写的

import Editor from '@toast-ui/editor'

正确的写法是

const Editor = toastui.Editor

通过他暴露出来的就可以看到，并且npm文档和源码中也有

1. 当我们换成@toast-ui/editor官方的cdn资源后控制台报错也没了，页面也能正常的展示。功能也是没问题的。

2. 并且打包后的体积editor也没了，剩下的就是chunk-vendor比较大，这个的话可以采用拆包 +
   开启gzip压缩来做进一步的打包优化

3. gzip压缩都知道，就是利用compression-webpack-plugin这个插件在配置一下就可以

4. 拆包需要在vue.config.js中的configureWebpack选项下的optimization中的splitChunks进行配置

5. 那么现在就剩下一个问题了，在项目中使用了@element-plus/icons-vue，即使你只使用了几个icon，打包的时候还是都会打包进去；这个没办法目前现在官方还没有给出解决办法，可以去github搜一下或许会找到解决办法；如果你的项目用到的icon不多，建议还是别安装了，可以自己封装一个全局的svg组件来使用