vue 优化 —— webpack配置splitChunks

总得来说

在 Vue 项目中,使用 splitChunks 是优化打包性能的重要手段。splitChunks 是 Webpack 提供的一个功能,用于将代码拆分成多个文件(chunks),从而减少初始加载时间,提升应用性能

Vue CLI 基于 Webpack,因此可以通过配置 vue.config.js 来使用 splitChunks

默认就配了

默认的 splitChunks 行为

Vue CLI 默认已经配置了 splitChunks,主要规则如下:

  • node_modules 中的第三方库打包到单独的 chunk 中(通常命名为 vendor)。
  • 将异步加载的模块打包到单独的 chunk 中(例如通过 import() 动态导入的模块)。

自己改一些配置

自定义 splitChunks 配置

如果需要更细粒度的控制,可以在 vue.config.js 中修改 configureWebpackchainWebpack 选项。

示例:vue.config.js

js 复制代码
module.exports = {
  configureWebpack: {
    optimization: {
      splitChunks: {
        chunks: 'all', // 对所有类型的 chunks 进行拆分(包括同步和异步)
        minSize: 20000, // 文件大小超过 20KB 才拆分
        maxSize: 0, // 不限制最大文件大小
        minChunks: 1, // 至少被引用一次才拆分
        maxAsyncRequests: 30, // 每个异步加载模块最多拆分成 30 个 chunks
        maxInitialRequests: 30, // 初始加载时最多拆分成 30 个 chunks
        automaticNameDelimiter: '~', // 文件名分隔符
        cacheGroups: {
          vendors: {
            test: /[\\/]node_modules[\\/]/, // 匹配 node_modules 中的模块
            priority: -10, // 优先级
            name: 'vendors', // 打包后的文件名
          },
          default: {
            minChunks: 2, // 至少被引用两次才拆分
            priority: -20, // 优先级
            reuseExistingChunk: true, // 重用已存在的 chunk
          },
        },
      },
    },
  },
};

配置详解

chunks

  • async:只拆分异步加载的模块(默认)。
  • initial: 只拆分同步加载的模块。
  • all:拆分所有模块(同步和异步)。

minSize

  • 文件大小超过指定值(单位:字节)才会被拆分。

maxSize

  • 文件大小超过指定值(单位:字节)时,尝试进一步拆分。

minChunks

  • 模块被引用次数超过指定值才会被拆分。

cacheGroups

  • 定义如何分组打包模块。

    • test:匹配模块路径的正则表达式。
    • priority:优先级,数值越大优先级越高。
    • name:打包后的文件名。
    • reuseExistingChunk:是否重用已存在的 chunk。

常见场景

第一种:把node_modules单独打包

js 复制代码
cacheGroups: {
  vendors: {
    test: /[\\/]node_modules[\\/]/,
    priority: -10,
    name: 'vendors',
  },
}

第二种:把common公共代码单独打包

js 复制代码
cacheGroups: {
  common: {
    minChunks: 2, // 至少被引用两次
    priority: -20,
    name: 'common',
    reuseExistingChunk: true,
  },
}

第三种:按需加载的路由组件

Vue Router 的动态导入(import())会自动生成单独的 chunk,无需额外配置。

运行 npm run build 后,可以在 dist/js 目录下看到生成的 chunk 文件。例如:

  • app.[hash].js:主应用代码。
  • vendors.[hash].js:第三方库代码。
  • common.[hash].js:公共代码。

注意事项

  • 不要过度拆分,否则可能会导致 HTTP 请求过多,反而影响性能。
  • 使用 maxSize 时,Webpack 会尝试将大文件拆分成更小的文件,但可能会增加额外的请求。
相关推荐
雪碧聊技术8 分钟前
深入解析Vue中v-model的双向绑定实现原理
前端·javascript·vue.js·v-model
快起来别睡了9 分钟前
手写 Ajax 与 Promise:从底层原理到实际应用
前端
打不着的大喇叭1 小时前
uniapp的光标跟随和打字机效果
前端·javascript·uni-app
无我Code1 小时前
2025----前端个人年中总结
前端·年终总结·创业
程序猿阿伟1 小时前
《前端路由重构:解锁多语言交互的底层逻辑》
前端·重构
Sun_light1 小时前
6个你必须掌握的「React Hooks」实用技巧✨
前端·javascript·react.js
爱学习的茄子1 小时前
深度解析JavaScript中的call方法实现:从原理到手写实现的完整指南
前端·javascript·面试
莫空00001 小时前
Vue组件通信方式详解
前端·面试
呆呆的心1 小时前
揭秘 CSS 伪元素:不用加标签也能玩转出花的界面技巧 ✨
前端·css·html
susnm1 小时前
Dioxus 与数据库协作
前端·rust