前端 - 在uniapp中异步组件如何单独打包？

Question

例如：

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？

Answer 1

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');