原文链接：vue的vendors优化
随着项目越来越大，用的插件越来越多，vendors也越来越大。vue-cli打包是根据减少http请求数的规则进行打包，而我在网站性能优化的时候说过，异步加载js会减少将近一半的时间，但又不能分太多js出来，分太多js会导致http请求过多而拖慢网站速度，这个度需要根据自己项目来分或者和。
拆分vendors
// 是否为生产环境
const isProduction = process.env.NODE_ENV !== 'development'
module.exports = {
configureWebpack: config => {
if (isProduction) {
// 将每个依赖包打包成单独的js文件
let optimization = {
runtimeChunk: 'single',
splitChunks: {
chunks: 'all',
maxInitialRequests: Infinity,
minSize: 300000,
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
name (module) {
// get the name. E.g. node_modules/packageName/not/this/part.js
// or node_modules/packageName
const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1]
// npm package names are URL-safe, but some servers don't like @ symbols
return `npm.${packageName.replace('@', '')}`
}
}
}
}
}
Object.assign(config, {
optimization
})
}
},
};
