经过各种百度方法都是下载插件compression-webpack-plugin,我也尝试了这种方法但是觉得不怎么好使,在打包后还是不会把vendors.js解压成各个包,可能是我自己不会使用插件得问题中途导致项目整体报错,通过各种百度方法最后把项目格式化,话不多说还是把我最后实现的代码显示一波
module.exports = {
// 项目webpack打包后的js,css这类资源使用cdn地址前缀
// 每次发布部署时请及时更新cdn资源
publicPath: process.env.NODE_ENV === "development" ? "/" : "/dist/",
assetsDir: "static",
outputDir: "dist", // 构建生产环境的目录
lintOnSave: false, // eslint 在构建的时候不会启动
runtimeCompiler: true,
devServer: {
open: true,
proxy: proxyObj,
// overlay: {
// warnings: true,
// errors: true
// }
},
transpileDependencies: [
"echarts",
"qrcode",
"v-charts",
"vant",
"view-design",
"vue-pdf",
"vue-slim-better-scroll",
"xss",
],
productionSourceMap: process.env.NODE_ENV !== "production",
configureWebpack: {
entry: "./src/main.js",
resolve: { extensions: [".js", ".json"] },
optimization: {
runtimeChunk: "single",
// maxInitialRequests: Infinity,
// minSize: 20000,
splitChunks: {
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("@", "")}`;
},
chunks: "all",
enforce: true,
priority: 10,
minSize: 30000,
maxSize: 50000,
},
},
},
},
},
};
最后实现了把打包后chunk-vendors.js解压成单体