多页面现代Web应用架构选型及配套技术栈选择咨询

你当前的场景非常适合采用多页应用(MPA) + 服务端模板注入的混合架构，既可以保留原有Perl服务端渲染的动态数据处理、首屏加载快的优势，也能用上现代前端的组件化、工程化能力，规避SPA方案首次加载体积大、路由逻辑复杂、客户端状态冗余等不必要的问题。
核心适配逻辑如下：

• 公共布局复用：将通用的菜单、右侧菜单、底部模块封装为可复用的TS/React组件，常规业务页面直接引入公共组件填充内容区即可，少量特殊页面完全自定义布局，不需要强制套用公共结构。
• 原有服务端能力复用：不需要全量替换Perl后端，只需要把原有服务端拼接HTML的逻辑，替换为前端构建输出的HTML模板，Perl侧仍负责路由管控、用户权限校验、动态数据生成，渲染页面时把数据和前端资源注入模板返回给客户端。
• 渐进式重构：可以先选少量非核心页面试点改造，验证流程通顺后逐步替换原有Perl渲染的页面，不需要一次性全量上线，降低重构风险。

你倾向的技术组合完全可以适配当前场景，只需要把SPA的单入口配置调整为多入口配置即可，核心配置逻辑如下：

• 多入口配置：webpack不再使用单入口，而是为每个页面对应一个独立入口，建议统一把页面入口放在src/pages/目录下，通过脚本自动遍历生成entry配置，不需要手动逐个添加，示例核心配置如下：

// webpack.config.js 核心片段
const glob = require('glob');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

// 自动扫描所有页面入口
const entries = glob.sync('./src/pages/*/index.tsx').reduce((entryMap, filePath) => {
  const pageName = path.basename(path.dirname(filePath));
  entryMap[pageName] = filePath;
  return entryMap;
}, {});

module.exports = {
  entry: entries,
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'js/[name].[contenthash].js',
    clean: true
  },
  module: {
    rules: [
      {
        test: /\.(ts|tsx)$/,
        exclude: /node_modules/,
        use: ['babel-loader']
      },
      // 其余css、图片等资源解析规则和SPA配置一致
    ]
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js', '.json']
  },
  plugins: [
    // 每个入口生成对应独立的HTML模板
    ...Object.keys(entries).map(pageName => new HtmlWebpackPlugin({
      filename: `${pageName}.html`,
      template: './public/base.html', // 公共HTML模板，预留动态数据注入占位符
      chunks: [pageName],
      inject: 'body'
    }))
  ],
  optimization: {
    // 拆分公共代码，多页面共用减少重复加载
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all'
        }
      }
    }
  }
}

• babel配置和React SPA的配置完全一致，只需要在预设中添加@babel/preset-typescript、@babel/preset-react即可，不需要额外调整。
• 动态数据对接：Perl服务端渲染HTML模板时，将当前用户的动态数据序列化为JSON，注入到window.__INITIAL_DATA__全局变量中，前端页面代码初始化时直接读取该变量渲染内容，不需要额外发起首屏接口请求，保留原有服务端渲染的性能优势。

• 通用UI组件、工具函数、布局组件可以单独抽离到src/components/、src/utils/目录下，所有页面复用，减少重复代码。
• 可以开启webpack的热更新能力，开发阶段修改代码后自动刷新对应页面，提升开发效率。

内容的提问来源于stack exchange，提问作者Nikita Fedin