在Vue項目中，我們經常會使用到utils（工具類）來封裝一些公共方法，方便我們在各個組件中復用。而在項目打包的過程中，這些utils文件會被打包到主文件中，增大了文件體積。為了讓這些utils可以單獨被打包，我們可以使用webpack的SplitChunksPlugin插件來進行配置。

首先，我們需要在webpack的配置文件中進行如下配置：

/* webpack.config.js */
...
optimization: {
splitChunks: {
cacheGroups: {
utils: {
name: 'utils',
test: /\.js$/,
chunks: 'all',
priority: 10
}
}
}
}
...

上述代碼中，我們通過optimization.optimization進行了webpack的優化配置，其中包括了SplitChunksPlugin插件。我們可以在cacheGroups的配置項中，設置一個以utils為名的緩存組，對滿足test條件（即匹配.js文件）的文件進行打包。

打包完成后，我們可以在index.html中引入通過utils打包出的js文件：

<!-- index.html -->
<script src="utils.js"></script>

在代碼中，我們可以按照如下方式進行utils方法的引用：

/* app.vue */
<template>
<div>
...
</div>
</template>
<script>
import utils from '@/utils.js'
export default {
mounted() {
utils.doSomething()
}
}
</script>

這樣，我們就可以將utils單獨打包出來，避免了將它們打包進主文件中造成的文件體積過大的問題，提升了項目的性能。

當然，以上只是最基本的單獨打包utils的方法，實際上，我們還可以進行更多的優化。例如，可以創建多個緩存組，對不同的utils進行不同的打包策略。另外，我們還可以在utils中引用一些第三方庫，這些庫也可以通過SplitChunkPlugin進行單獨打包。這可以進一步減小文件體積，提升項目的性能。