使用webpackMode:"weak"时Webpack不输出引用模块chunk的原因及解决方案

行为原因说明 #

webpackMode: "weak"的设计逻辑是仅加载已经被注入到webpack运行时中的模块，既不会主动生成独立的chunk文件，也不会发起异步加载请求。该模式默认你已经通过其他构建流程将目标模块打包到了初始加载的代码中，所以不会输出单独的语言包chunk，属于符合设计预期的行为。

解决方案 #

方案1：最小改动适配现有逻辑 #

如果不想大幅调整现有代码，可以按以下步骤修改：

• 调整动态导入的magic comment配置，强制webpack输出所有语言包chunk：

import(
    /* webpackMode: "lazy" */
    /* webpackChunkName: "locales/[request]" */
    /* webpackInclude: /locale\.[a-zA-Z-]+\.ts$/ */
    `./locales/locale.${currentUser.language}`
).then(m => {
    module = m;
}).catch(() => {
    throw new Error(`缺失对应语言包：${currentUser.language}`);
})

• 服务端渲染HTML时，将对应用户语言的locale chunk的<script>标签放在主chunk的<script>标签之前，浏览器会优先下载执行语言包，主chunk加载执行时动态导入会直接命中已加载完成的模块，不需要额外等待网络请求。
• 给导出方法加兜底判断，避免调用时模块未初始化：

export function getText(text: string): string {
    if (!module) throw new Error("语言包未完成加载");
    return module.getText(text);
}

方案2：同步调用最优实现（推荐） #

既然你可以在服务端渲染阶段拿到用户语言，完全可以去掉异步逻辑，实现100%同步调用：

1. 在webpack配置中新增entry规则，将所有语言包单独打包为UMD格式输出：

// webpack.config.js
const fs = require('fs');
const path = require('path');

module.exports = {
    entry: fs.readdirSync(path.resolve(__dirname, 'locales')).reduce((entries, file) => {
        const langMatch = file.match(/locale\.([a-zA-Z-]+)\.ts/);
        if (langMatch) {
            entries[`locales/locale.${langMatch[1]}`] = `./locales/${file}`;
        }
        return entries;
    }, {}),
    output: {
        library: ['Locale', '[name]'],
        libraryTarget: 'umd'
    }
}

2. 服务端渲染HTML时还是提前引入对应用户语言的语言包script标签，语言包执行后会自动挂载到window.Locale全局对象上。
3. 调整localization.ts逻辑，直接从全局取值，缺省直接抛出错误：

const module = window.Locale?.[`locale.${currentUser.language}`];
if (!module) throw new Error(`缺失对应语言包：${currentUser.language}`);

export function getText(text: string): string {
    return module.getText(text);
}

该方案完全没有异步逻辑，所有导出方法都可以直接同步调用，性能更优，错误提示也更直接。

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