vue打包过程中把依赖打成一个包,导致太大。
一般解决办法是分包和gzip压缩,在wepack和vite中的实现如下:
1、webpack版本:
在vue.config.js文件中设置
module.exports = {
configureWebpack: {
optimization: {
// 分包
splitChunks: {
chunks: 'all',
cacheGroups: {
vue: {
test: /[\\/]node_modules[\\/]vue[\\/]/,
name: 'chunk-vue'
}
}
}
},
plugins: [
// 压缩
new CompressionPlugin({
test: /\.(js|css|html)?$/i, // 压缩文件格式
filename: '[path].gz[query]', // 压缩后的文件名
threshold: 10240, // 小于10KB就不进行压缩
algorithm: 'gzip', // 使用gzip压缩
minRatio: 0.8 // 压缩率小于1才会压缩
})
]
}
}
2、vite版本:
在vue.config.js文件中的build中设置,参考地址配置 Vite | Vite
build: {
// 分包
rollupOptions: {
output: {
entryFileNames: `assets/[name].${new Date().getTime()}.js`,
chunkFileNames: `assets/[name].${new Date().getTime()}.js`,
assetFileNames: `assets/[name].${new Date().getTime()}.[ext]`,
compact: true,
manualChunks: {
vue: ['vue', 'vue-router', 'vuex'],
echarts: ['echarts']
},
},
}
}
在nginx中解压参考常见问题 | RuoYi