Vue项目性能优化、提取公共库（Common Chunks）

ops/2025/3/4 20:25:36/

SplitChunksPlugin | webpack 中文文档

项目打包： npm run build
根目录下生成一个 dist 文件夹

css：当前项目中所有打包后的样式文件
js：当前项目中所有打包后的 js 文件
app.js 所有 src 目录下内容打包后的结果
app.js.map：上面文件的映射文件
chunk.js：所有第三方包打包后的文件
chunk.js.map：上面文件的映射文件
index.html：项目的静态页面

chunk-vendors.js 顾名思义 chunk （块 / 包） - vendors （供应商），即为：不是自己写的模块包，也就是/node_modules项目目录的所有模块包，它们称为第三方模块或供应商模块

一 . `splitChunks`

splitChunks配置是 Webpack 的一个特性，主要用于在生产环境（production）下的代码分割。它在构建应用时自动分析模块的共享情况，并将其分割成单独的 chunk，可以在需要时按需加载, 以便于复用和提高缓存利用率

官网推荐的默认行为(vue.config.js)

module.exports = {//...optimization: {splitChunks: {chunks: 'async',minSize: 20000,minRemainingSize: 0,minChunks: 1,maxAsyncRequests: 30,maxInitialRequests: 30,enforceSizeThreshold: 50000,cacheGroups: {defaultVendors: {test: /[\\/]node_modules[\\/]/,priority: -10,reuseExistingChunk: true,},default: {minChunks: 2,priority: -20,reuseExistingChunk: true,},},},},
};

我所在项目配置的 (除了elementUI, 包括vue, vuex ,vue-router等都可以配置代码分割, 基于我已使用cdn加速, Gzip压缩, 所以只配了elementUI来展示 )

Vue项目性能优化、开启Gzip

Vue项目性能优化、配置CDN加速

module.exports = {// ...//配置代码分割optimization: {splitChunks: {chunks: "all",// 可选值：all，async 和 initial。all功能最强大minSize: 20000, //最小包体积，这里的单位是byte，超过这个大小的包会被splitChunks优化minChunks: 1, maxAsyncRequests: 30, //按需加载时的最大并行请求数maxInitialRequests: 30, // 最多首屏加载30个请求cacheGroups: {vendors: {//vendor是导入的 npm 包(第三方库) ,有人会命名为libs等类名name: "chunk-vendors",test: /[\\/]node_modules[\\/]/, // 使用正则匹配node_modules中引入的模块priority: -10,},elementUI: {name: "chunk-elementUI",priority: 20,test: /[\\/]node_modules[\\/]element-ui[\\/]/,reuseExistingChunk: true, //是否缓存chunks: "async",},// 书写其他依赖包 ...// 备一个优先级最低的chunk-commons.js，用于处理其他公共组件commons: {// 公共模块包name: `chunk-commons`,minChunks: 2,priority: 0,reuseExistingChunk: true, //是否缓存},},},},// ...
};

二. 效果展示

splitChunks配置前