Vue cli 打包后vendor 文件过大怎么处理

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

entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
  app (2.51 MiB)
      css/chunk-vendors.ccd31983.css
      js/chunk-vendors.5abd4859.js
      css/app.453cab07.css
      js/app.4003a40d.js

想问一下:

  1. chunk-vendors 应该是webpack自动抽出来的公共代码部分,但是这个巨大的chunk-vendors 是否会十分影响第一次页面渲染?如果是的话,我应该怎么样优化呢? 比如这里面的tiptap-vuetify 比vuetify还要大,但是它只是一个编辑器,主页的第一次渲染根本不需要。
  2. 如何优化提示的css过大的问题?并且我在bundle analyzer中并找不到提示的那些css文件。

求大佬解答,谢谢。

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

const loanApply = () => import(/* webpackChunkName: "loan" */ '@/components/loan/apply')
…
…

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

import { TiptapVuetifyPlugin } from "tiptap-vuetify";
import "tiptap-vuetify/dist/main.css";
// Vuetify's CSS styles
import "vuetify/dist/vuetify.min.css";
// use this package's plugin
Vue.use(TiptapVuetifyPlugin, {
vuetify, // same as "vuetify: vuetify"
// optional, default to 'md' (default vuetify icons before v2.0.0)
iconsGroup: "md",
});

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