在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

回到顶部