用vuecli 搭建了项目，很方便，但是对于webpack的设置理解还是不够透彻。在不断的加入了一些第三方的库后，现在build完之后总是提醒

顺晟科技：

optimization.splitChunks 进行拆分呗，我这边的配置

Webpack如何打包才能尽可能的缩小体积(详解)_js_admin的博客-CSDN博客_webpack减小打包体积试试这个网页的介绍

打包结果如下

import { TiptapVuetifyPlugin } from "tiptap-vuetify";

想问一下：

求大佬解答，谢谢。

谢谢回答。我也有看过代码分离的文档，但是感觉更多的是在Routing中应用比较多？现在我使用的这个第三方库tiptap-vuetify 是通过在main.js 里面全局引入的。

谢谢你的回复。我之前尝试把每个node_modules 都拆了出来。但在网站加载过程中发现首页渲染的时候还是全部请求这些资源。有没有什么方法，可以按需加载node_modules呢？首页加载的时候其他并不需要用到大部分组件依赖的三方库。

这样是不是导致了在首页没有用到这个插件的时候也会在chunk-vendors中加载？这样的第三方库可以如何使用代码分离呢？谢谢。

可以考虑下 代码分离, 目前本人采用第三种，动态导入的方案实现的：