webpack 网络包5 SplitChunksPlugin然后呢？

sdnqo3pr 于 2023-03-18 发布在 Webpack

关注(0)|答案(1)|浏览(155)

我刚刚开始查看SplitChunksPlugin，它生成了一些新的bundle，例如120.b01d2775b45c779ccb2e.bundle.js。当我导航到页面时，我可以看到user_spa. bundle. js像往常一样加载，但随后页面只是一个白色页，没有错误。
我已经在路线上使用了react和lazy-loading，它生成了类似的bundle，但是当导航到一个新的路线时，它们会按需加载。
我原以为代码分割也会有类似的效果，但我肯定漏掉了什么。
以下是Webpack配置：

module.exports = {
    context: path.join(__dirname, "App"),
    entry: {
        user_spa: ["./Spa/user_spa.js"],
        admin_spa: ["./Spa/admin_spa.js"],
        login_spa: ["./Spa/login_spa.js"],
    },
    optimization: {
        moduleIds: 'deterministic',
        runtimeChunk: 'single',
        splitChunks: {
            chunks: 'all',
            cacheGroups: {
                vendor: {
                    test: /[\\/]node_modules[\\/]/,
                    name: 'vendors',
                    chunks: 'all',
                    enforce: true
                },
            },
        },
    },
    target: ["web", "es5"],
}

哪位好心人能给我指个路吗？

webpack

来源：https://stackoverflow.com/questions/75537104/webpack-5-splitchunksplugin-then-what

1条答案

按热度按时间

n3schb8v1#

如果有人遇到这个问题，并感到困惑，因为我是.分割块将创建新的捆绑，你需要添加作为脚本标记在您的索引html文件.如果你使用HtmlWebpackPlugin，你可以使用它来自动包括他们.但在我的情况下，我们没有，因此我需要手动添加他们.
以下是最终结果：

optimization: {
        moduleIds: 'deterministic',
        runtimeChunk: 'single',
        splitChunks: {
            cacheGroups: {
                vendors: {
                    test: /[\\/]node_modules[\\/]/,
                    name: 'vendors',
                    chunks: 'all',
                    reuseExistingChunk: true,
                    idHint: 'vendors',
                },
                assets: {
                    test: /[\\/]Assets[\\/](?!Resources)/,
                    name: 'assets',
                    chunks: 'all',
                    reuseExistingChunk: true,
                    idHint: 'assets',
                },
                components: {
                    test: /(?!Spa)[\\/]Components[\\/]/,
                    name: 'components',
                    chunks: 'all',
                    reuseExistingChunk: true,
                    idHint: 'components',
                },
            },
        },
    },

<script src="@Url.Script("build", "runtime.bundle.js")" nonce="@Context.GetNonce()"></script>
<script src="@Url.Script("build", "vendors.bundle.js")" nonce="@Context.GetNonce()"></script>
<script src="@Url.Script("build", "assets.bundle.js")" nonce="@Context.GetNonce()"></script>
<script src="@Url.Script("build", "components.bundle.js")" nonce="@Context.GetNonce()"></script>
<script src="@Url.Script("build", "user_app.bundle.js")" nonce="@Context.GetNonce()"></script>

赞(0）回复(0）举报 2023-03-18

我来回答

webpack 网络包5 SplitChunksPlugin然后呢？

1条答案

相关问题

热门标签

最新问答