1. vite启动速度快
2. 切换路由就可以打开路由的开发测试的模块

启动工具vite

import { defineConfig } from 'vite';
import path from 'path';
import fs from 'fs';
import { execSync } from 'child_process';

const PROJECT_ROOT_MAPPING = {
    demo: 'demo',
};

const root = process.cwd();

const projectRoot = path.resolve(root, PROJECT_ROOT_MAPPING[process.env.NODE_ENV] || 'src');
if (!fs.existsSync(projectRoot)) {
    throw new Error(projectRoot);
}

const cacheDir = path.resolve(root, '.vite.cache');
if (!fs.existsSync(cacheDir)) {
    fs.mkdirSync(cacheDir);
}

process.once('SIGINT', () => {
    execSync('yarn clean');
});

export default defineConfig({
    root: projectRoot,
    cacheDir,
    resolve: {
        alias: {
            '@node_modules_old': path.resolve(root, 'node_modules_old'),
        },
    },
    server: {
        open: true,
        port: 9500,
    },
});

webpack

   devServer: {
        open: true,
        host: 'localhost',
        publicPath: '/',
        contentBase: './public',
        historyApiFallback: true, // 启动之后可以识别路由
    },

\

项目生成器

import { createBrowserHistory, Listener, History } from 'history';

const history = createBrowserHistory();

class Component {
    history: History = undefined;

    render(): void {}
    dispose(): void {}
}

/**
 * 生成器
 */
class Renderer {
    #workingInProgressModule = undefined;

    rootPath = undefined; // 路由的根路径
    history = history;

    constructor() {
        history.listen(this.#historyListener);
    }

    #historyListener: Listener = (params) => {
        const moduleName = params.location.pathname;
        console.log('[current route]:', moduleName);
        this.#loadModule(moduleName);
    };

    #dispose = () => {
        if (this.#workingInProgressModule) {
            this.#workingInProgressModule.dispose();
        }
    };

    #loadModule = (moduleName: string = 'index') => {
        import(/* @vite-ignore */ `${this.rootPath}${moduleName}`)
            .then((mod) => {
                this.#dispose();
                if (mod.default) {
                    this.#workingInProgressModule = new mod.default();
                    this.#workingInProgressModule.history = history;
                    this.#workingInProgressModule.render();
                    if (typeof this.rendered === 'function') {
                        this.rendered(this.#workingInProgressModule);
                    }
                }
            })
            .catch((e) => {
                console.error('[error]:', e);
                document.body.innerHTML = '404';
            });
    };

    rendered: (_arg: any) => void;

    loadModule(moduleName: string = 'index') {
        this.#loadModule(moduleName);
    }
}

class DemoRenderer extends Renderer {
    rootPath = '/demo';
}

export default Renderer;

export { Component, DemoRenderer };

截图