在使用 Vue 開發項目過程中，我們常常需要使用 vue-cli 打包生成部署文件，而其中一個重點部分就是 chunk。所謂 chunk，簡單來說就是將整個應用程序分割成幾部分進行加載，帶來了更高的效率和更好的用戶體驗。

在 vue-cli 中，我們可以通過配置 webpack 的 optimization.splitChunks 對 chunk 進行優化。

module.exports = {
//...
optimization: {
splitChunks: {
chunks: 'async', // async 表示只對異步加載的模塊進行分割
minSize: 30000, // 最小的分割模塊大小
maxSize: 0,
minChunks: 1, // 至少被引用一次才分割
maxAsyncRequests: 5, // 最多異步請求幾個
maxInitialRequests: 3, // 最多初始化請求幾個
automaticNameDelimiter: '~',
name: true,
cacheGroups: { // 緩存組，對chunk進行分組
vendors: {   // 第三方庫
test: /[\\/]node_modules[\\/]/,
priority: -10
},
default: {
minChunks: 2,
priority: -20,
reuseExistingChunk: true
}
}
}
}
}

上述配置表示將 webpack 中的 chunk 分割方式設置為按需加載的方式，并且要分割的模塊最小大小為 30KB，至少要被引用一次。同時最多異步請求 5 個，初始化請求 3 個，最終將同類文件打包進同一個 chunk 中。

通過合理的 chunk 配置，我們可以更好地優化項目性能，提高用戶體驗。