在构建时而不是运行时构建静态对象数组？

Question

我希望避免在我的vue代码中尝试管理多个静态数组。目前，我有一个用于i18Next的长json，并且正在使用它在运行时为vue-treeselect生成必备的对象数组。但我可以看到它在磨练，性能明显滞后。

因为我实际上不需要在运行时构建这些数组，有没有构建/开发时的方法呢？

将i18next json转换为数组目前是由

export function walk(item) {
    const mainArray = [];
    Object.keys(item).forEach((key) => {
        const objectLiteral = {};
        objectLiteral.id = key;
        objectLiteral.label = 'later - gen key';
        if (typeof item[key] === "object") {
            
            const arrayTemp = [];
            //we need to create an array of objects here and assign them to 'children' in the parent
            Object.keys(item[key]).forEach((key2) => {
                if (key2.slice(-3) === 'gen') {
                    objectLiteral.label = item[key][key2];
                } else { 
                const objectTemp = {};
                objectTemp.id = key2;
                objectTemp.label = item[key][key2];
                arrayTemp.push(objectTemp);
                }
            });
            objectLiteral.children = arrayTemp;
        }
        mainArray.push(objectLiteral)
    });
    return mainArray;
}

我使用vite作为开发/构建环境

Answer 1

根据您为项目使用的构建工具，您总是可以在bundler的构建管道中生成这些内容。

例如，在Webpack中，您可以简单地运行一个脚本并将结果作为变量注入，因为它只是一个JavaScript。

https://webpack.js.org/plugins/define-plugin/

其他构建工具也能够在构建步骤中运行脚本。

编辑:正如baradhili自己提到的，你可以通过“package.json script.js”在节点中设置一个脚本，例如在构建期间使用其他构建工具运行脚本。这样，您就可以预先构建数据数组。