在uniapp中异步组件如何单独打包?
例如:
let VConsole = await import(/* webpackChunkName: "vcon" */ '@/common/igw/vconsole.min.js');let whiteList = ['小明','xiaoli'];
if(whiteList.includes(userInfo.username)){
var vconsole = new VConsole();
}
config.optimization.splitChunks({ chunks: "all",
automaticNameDelimiter: "~",
name: function (module, chunks, cacheGroupKey) {
const moduleFileName = module
.identifier()
.split("/")
.reduceRight((item) => item);
const allChunksNames = chunks.map((item) => item.name).join("~");
return `${moduleFileName}`;
},
cacheGroups: {
vendors: {
name: "chunk-vendors",
chunks: "initial",
reuseExistingChunk: true,
enforce: true,
priority: 0,
// minChunks: 1,
minSize: 30000,
},
pages: {
name: "chunk-pages",
test: /pages\.json$/,
chunks: "all",
reuseExistingChunk: true,
enforce: true,
priority: 90,
minChunks: 1,
minSize: 10000,
},
"jsencrypt": {
name: "jsencrypt",
test: /jsencrypt/,
chunks: "all",
reuseExistingChunk: true,
enforce: true,
priority: 70,
}
},
});
打包时候,vconsole总是被打包到chunk-vendors中,没有单独打成一个chunk,这么配置如何修改,才能实现异步加载vconsole?
回答:
config.optimization.splitChunks({ cacheGroups: {
"vconsole": {
name: "vconsole",
test: /vconsole\.min\.js$/, // 匹配vconsole的路径或者文件名
chunks: "all",
reuseExistingChunk: true,
enforce: true,
priority: 80, // 优先级应该高于其他的cacheGroups
}
},
});
注释要写对:
let VConsole = await import(/* webpackChunkName: "vconsole" */ '@/common/igw/vconsole.min.js');
以上是 在uniapp中异步组件如何单独打包? 的全部内容, 来源链接: utcz.com/p/934362.html