Vue打包vendor太大，是很多开发者都会遇到的一个问题。在项目开发中，我们通常会使用很多第三方库，例如Element UI、vuex、vue-router等。而这些库的代码会被打包到vendor.js中，导致打包出的文件过大，影响页面加载速度。下面我们来详细介绍一下如何解决这个问题。

第一步，需要了解什么是vendor。在Webpack中，vendor是指项目中不需要经常改动的第三方库文件，例如Vue.js、Vuex.js等。这些库的代码会被打包到vendor.js中，并且在页面加载时优先加载，以提高页面的性能。

第二步，我们需要对项目中使用的第三方库进行分析。使用Webpack自带的分析工具，可以快速了解哪些库的代码占用了打包后文件的大部分空间。运行命令：webpack --profile --json >stats.json，生成一个stats.json文件，然后使用webpack-bundle-analyzer插件进行分析，插件会自动打开一个页面，展示所有的模块及其占用空间大小。

const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
module.exports = {
// 省略其他配置 
plugins: [ 
new BundleAnalyzerPlugin()
]
}

第三步，我们可以使用Webpack的DllPlugin将第三方库的代码单独打包成一个dll文件，避免重复打包。使用如下代码：

const dllPlugins = [
new webpack.DllPlugin({
name: '[name]_[hash]',
path: path.join(__dirname, '../dll/[name].manifest.json'),
context: __dirname
}),
new AddAssetHtmlWebpackPlugin({ 
filepath: path.resolve(__dirname, '../dll/*.dll.js'),
outputPath: 'dll',
publicPath: '/dll'
}),
]
module.exports = {
// 省略其他配置 
plugins: [ 
...dllPlugins
]
}

在打包之前，需要先运行一次webpack --config build/webpack.dll.js打包生成dll文件。

第四步，我们可以使用Externals将第三方库的代码从打包文件中剔除，从而减小文件大小。在Webpack的配置文件中添加如下代码：

module.exports = {
// 省略其他配置 
externals: {
'vue': 'Vue',
'vue-router': 'VueRouter',
'vuex': 'Vuex',
'axios': 'axios',
},
}

通过以上四步，我们可以有效减少打包后文件的大小，提高页面加载速度。不过需要注意的是，DllPlugin和Externals的使用有些情况下可能并不适用，需要结合具体项目进行优化。