diff --git a/README.md b/README.md index 8308a55..ff35380 100644 --- a/README.md +++ b/README.md @@ -177,26 +177,6 @@ rollupOptions: { ``` 此外还有一些第三方的拆分插件工具可以,比如:vite-plugin-chunk-split。 -### 4、删除不必要的依赖项或者使用 CDN - -可以通过 rollup-plugin-visualizer 插件进行可视化分析,找出哪些依赖项占用了最多的空间。然后,您可以考虑删除不必要的依赖项或将其替换为更轻量级的库。 - -``` -import { visualizer } from 'rollup-plugin-visualizer' -export default defineConfig({ - plugins: [ - // ... - visualizer() - // ... - ], -}); -``` -![image](src/assets/readme/8.png) - -引入外部CDN库也可以,但是考虑到网络安全问题并不建议使用,该方法使用 vite-plugin-cdn-import 插件,具体使用方法参考官方文档,这里不详细介绍了。 -https://github.com/MMF-FE/vite-plugin-cdn-import/blob/master/README.zh-CN.md - - ## 打包压缩 @@ -424,4 +404,26 @@ Suspense 可以搭配异步组件一起使用,目前还是实验性功能, ``` 用法有点像骨架屏,等待异步组件都完成之后,Suspense才进入完成状态。由于目前还不稳定,api也会更新,暂时不推荐使用。可以查看官方文档:https://cn.vuejs.org/guide/built-ins/suspense.html +## 其他 + +### 1、删除不必要的依赖项 + +可以通过 rollup-plugin-visualizer 插件进行可视化分析,找出哪些依赖项占用了最多的空间。然后,您可以考虑删除不必要的依赖项或将其替换为更轻量级的库。 + +``` +import { visualizer } from 'rollup-plugin-visualizer' +export default defineConfig({ + plugins: [ + // ... + visualizer() + // ... + ], +}); +``` +![image](src/assets/readme/8.png) + +### 2、使用 CDN +引入外部CDN库也可以,但是考虑到网络安全问题并不建议使用,该方法使用 vite-plugin-cdn-import 插件,具体使用方法参考官方文档,这里不详细介绍了。 +https://github.com/MMF-FE/vite-plugin-cdn-import/blob/master/README.zh-CN.md +