Vue项目路由模块懒加载脚本

项目之前是后端同学写的，200多个模块同步加载进来本地打包时间特别长，首屏时间也长，于是将路由模块改为异步加载，也就是懒加载。

由

import Login from './components/common/Login.vue'

改为

const Login = () => import('./components/common/Login.vue')

执行脚本如下：

const fs = require('fs/promises');
const { parse, traverse } = require('@babel/core');

function getAllDep (content) {
    let deps = {}
    const ast = parse(content)
    traverse(ast, {
        ImportDeclaration ({ node }) {
            deps[node.specifiers[0].local.name] = node.source.value
        }
    })
    return deps;
}

async function replaceCom () {
    const content = await fs.readFile('src/routes.js')
    let contentStr = content.toString();
    const deps = getAllDep(contentStr)

    Object.keys(deps).forEach(moduleName => {
        contentStr = contentStr.replaceAll(`component: ${moduleName},`, `component: () => import('${deps[moduleName]}'),`)
    })
    // console.log(deps)

    // 写入文件
    fs.writeFile('src/routes.lazy.js', contentStr)
}

replaceCom()