Preact结合react-redux时Webpack动态加载致Preact模块导出缺失

云原生阿岚

2026-10-23

问题描述

项目基于Preact框架开发，结合react-redux实现状态管理，借助Webpack代码分割能力实现模块动态加载时出现异常
两种加载方式的表现差异：
- 通过静态<script>标签直接引入核心bundle时，所有功能运行完全正常
- 通过手动创建script标签、插入文档流加载对应bundle时，程序直接运行报错，加载逻辑如下：
```
const script = document.createElement('script');
script.src = 'bundle-location.js';
document.body.appendChild(script);
```
断点定位到的根因：
- 静态加载场景下，通过Webpack别名映射到preact/compat的react模块（打包产物中的react__WEBPACK_IMPORTED_MODULE_0__）包含完整的Preact导出，可正常运行
- 动态加载相同脚本时，虽然Preact对象存在，但所有导出（包括default导出）全部丢失
对照验证结果：关闭Webpack代码分割功能后，所有功能可正常运行

项目当前使用的Webpack配置如下：

const config = {
  mode: getMode(),
  resolve: {
    alias: {
      react: 'preact/compat',
      'react-dom': 'preact/compat',
    },
    extensions: ['.ts', '.tsx', '.js'],
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx|ts|tsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
      {
        test: /\.svg$/,
        exclude: /node_modules/,
        use: [
          'babel-loader',
          {
            loader: 'react-svg-loader',
            query: {
              svgo: {
                pretty: true,
                plugins: [
                  {
                    removeStyleElement: true,
                  },
                  {
                    removeViewBox: false,
                  },
                ],
              },
            },
          }],
      },
    ],
  },
  plugins: [
    new webpack.DefinePlugin({
      PLUGINS_PATH: JSON.stringify(getPluginsPath()),
    }),
  ],
  entry: './src/index.ts',
  output: {
    path: path.resolve(__dirname, './src/dist/bundle/'),
    filename: 'bundle.js',
    chunkFilename: '[name].js',
    publicPath: getPluginsPath(),
  },
};

module.exports = config;

排查思路

核心触发原因和代码分割的公共依赖拆分逻辑直接相关：开启代码分割后，Webpack默认会把跨chunk共享的依赖（preact/compat、react-redux等）自动提取为独立的异步公共chunk。手动用原生script标签加载目标bundle时，没有按照Webpack预设的依赖顺序先拉取对应公共chunk，会出现模块被引用、但实际导出尚未加载完成的情况，最终表现为Preact对象存在但导出全部丢失。
时序不匹配问题：原生手动创建的script标签加载是异步执行的，没有等待依赖的公共chunk加载完成就触发模块注册逻辑，和Webpack自动代码分割的模块加载时序不兼容。
路径匹配问题：output.publicPath的返回值和动态加载的脚本路径不一致时，Webpack自动拉取公共chunk会出现资源404，公共chunk加载失败就会导致模块导出为空。

可行解决方案

调整Webpack chunk拆分规则，锁定核心依赖位置
- 通过Webpack的optimization.splitChunks配置，强制把Preact、react-redux等核心依赖打包到主入口bundle中，禁止Webpack把这类全局依赖拆分到异步公共chunk，从根源上避免手动加载时的依赖缺失问题。配置示例：
```
// 加入到现有Webpack配置的根层级
optimization: {
  splitChunks: {
    cacheGroups: {
      coreVendor: {
        test: /[\\/]node_modules[\\/](preact|preact-compat|react-redux|redux)[\\/]/,
        name: 'bundle',
        chunks: 'all',
        enforce: true,
        priority: 100,
      }
    }
  }
}
```
替换原生手动脚本加载逻辑，改用Webpack内置动态加载API
- 不要自行创建script标签加载bundle，直接使用Webpack支持的import()语法加载目标模块。Webpack会自动按照依赖顺序拉取对应的公共chunk，保证加载时序和模块注册逻辑完全匹配，不会出现导出丢失的问题。示例：
```
// 替换手动创建script的逻辑
import(/* webpackChunkName: "target-bundle" */ 'bundle-location.js')
  .then((module) => {
    // 模块加载完成后的初始化逻辑
  })
```
修正publicPath动态匹配逻辑
- 检查getPluginsPath()返回的publicPath值是否和动态加载的脚本实际路径完全一致，路径不匹配会导致Webpack自动拉取公共chunk时出现404。可以在动态加载bundle前，显式给Webpack全局变量__webpack_public_path__赋值，保证当前加载的bundle路径和Webpack拉取依赖的路径完全对齐。
统一模块导入方式
- 检查项目内是否存在混用默认导入、命名空间导入的情况：比如部分代码写import React from 'react'，部分代码写import * as React from 'react'。这种导入方式的不一致会触发Webpack对模块导出的差异化处理，静态加载时因为所有依赖都在同一个bundle内不会暴露问题，代码分割后就会出现模块实例不匹配、导出丢失的情况。可以在Webpack配置中把preact/compat设置为全局单例模块，避免拆分后出现多个独立的Preact实例。

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