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中加载?这样的第三方库可以如何使用代码分离呢?
谢谢。

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

cfg.optimization.splitChunks = {

          chunks: "async",

          minSize: 300 * 1024,

          minChunks: 1,

          maxAsyncRequests: 5,

          maxInitialRequests: 3,

          automaticNameDelimiter: "~",

          name: true,

          cacheGroups: {

            dll: {

              test: /[\\/]node_modules[\\/](|core-js|vue|vue-router)[\\/]/,

              name: "dll",

              priority: 2,

              enforce: true,

              reuseExistingChunk: true

              // chunks: "initial"

            },

            docx: {

              test: /[\\/]node_modules[\\/](docx)[\\/]/,

              name: "docx",

              priority: 3,

              enforce: true,

              reuseExistingChunk: true

              // chunks: "initial"

            },

            kushUtil: {

              test: /[\\/]node_modules[\\/](|@kush)[\\/]/,

              name: "@kush",

              priority: 4,

              enforce: true,

              minChunks: 1,

              reuseExistingChunk: true

              // chunks: "initial"

            },

            systemUtil: {

              test: /[\\/]src[\\/](class|util|vueReuse)[\\/]/,

              name: "@systemUtil",

              priority: 5,

              enforce: true,

              minChunks: 1,

              reuseExistingChunk: true

              // chunks: "initial"

            },

            ar: {

              test: /[\\/]src[\\/](api|router)[\\/]/,

              name: "@ar",

              priority: 6,

              enforce: true,

              minChunks: 1,

              reuseExistingChunk: true,

              chunks: "initial"

            },

            as: {

              test: /[\\/]src[\\/](assets)[\\/]/,

              name: "@as",

              priority: 6,

              enforce: true,

              minChunks: 1,

              reuseExistingChunk: true,

              chunks: "initial"

            },

            overlayscrollbars: {

              test: /[\\/]node_modules[\\/](|overlayscrollbars|overlayscrollbars-vue)[\\/]/,

              name: "@overlayscrollbars",

              priority: 7,

              enforce: true,

              minChunks: 1,

              reuseExistingChunk: true,

              chunks: "initial"

            },

            commons: {

              name: "commons",

              priority: 1,

              minChunks: 2, //Math.ceil(pages.length / 3), 当你有多个页面时,获取pages.length,至少被1/3页面的引入才打入common包

              reuseExistingChunk: true

              // chunks: "initial"

            }

          }

打包结果如下

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

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