问题标签 [webpack-splitchunks]

我正在尝试将项目拆分为公共块，使用旧的 commonChunks 插件很容易，因为该项目旨在拆分为各种库......使用新的 splitChunks 我无法获得相同的结果。所以我回到了一个基本的测试来试图理解新的 splitChunks，不幸的是我面临着同样的问题。这里是配置文件：

使用该配置，我可以实现此输出，这正是我想要做的：

这个例子很简单，一切正常！

• pageA 取决于 react 和 commonAB -> OK
• pageB 取决于 react 和 commonAB -> OK
• pageC 依赖于 react 和 commonCD -> OK
• pageD 取决于 react 和 commonCD -> OK

但是，当我修改ab_a.js的代码并添加

输出是：

如您所见， pageC 和 pageD 取决于 commonAB.js，但事实并非如此！这个例子很简单，一切正常！

• pageA 取决于 react 和 commonAB -> OK
• pageB 取决于 react 和 commonAB -> OK
• pageC 取决于 react 和 commonAB 和 commonCD -> 错误
• pageD 取决于 react 和 commonAB 和 commonCD -> 错误

此外，如果我从“react”导入 React；进入 cs_c.js （已经预期，但不是我想要的）我有输出：

• pageA 取决于 react 和 commonAB 和 commonCD -> 错误
• pageB 取决于 react 和 commonAB 和 commonCD -> 错误
• pageC 取决于 react 和 commonAB 和 commonCD -> 错误
• pageD 取决于 react 和 commonAB 和 commonCD -> 错误

感谢您的帮助 ！

我有两个条目：page1.js、page2.js。

我不想在两个条目之间提取共享代码。我只想提取 page2.js 中使用的 node_modules。

如何在 webpack 4 中实现这一点？谢谢。

我有一些条目：app、vendor、polyfills和bootstrap输出为 library['app', '[name]']和 libraryTarget var。

在浏览器app变量中包含：

如果我使用optimization.splitChunks将 rxjs 移动到bootstrap块app变量包含：

（无bootstrap块）

我的配置：

如何移动rxjs到bootstrap块不丢失app.bootstrap变量值？

我试图让 Webpack-4 splitChunks 优化来做到这一点：

1. 将所有 JS 和 CSS 放在任何入口点，但不止一次使用到公共文件（CSS 和 JS）中。
2. 将 MiniCssExtractPlugin 从 Vue 组件生成的所有 CSS 合并到同一个通用 CSS 文件中。

我有这个工作（如下），但第二个“extractedStuff”规则的效果是将所有入口点代码也放入共享块中，这就是我试图用那个“测试”来阻止的。“入口点”文件只是 webpack 存根，所有内容都在公共文件中，即使它只使用一次。它有效，但并不优雅。

有谁知道如何从第二条规则中排除入口点，还是有更好的方法来做到这一点？

有谁知道那些“模块，块”对象的定义在哪里，因为也许我可以通过某种方式更好地进行测试。

},

我试图弄清楚如何配置 Webpack 4 的 SplitChunks 插件。如果我允许它将模块放在共享/公共块中，那么这些模块似乎是异步加载的。

entry.js：

这包含在页面中：

如果没有SplitChunks，JQuery 就在里面bundle.js并且可以立即用于页面。但是，一旦我启用 SplitChunks 并且 JQuery 被移动到一个单独的块中，页面就会触发一个错误：$ is not defined

我试图添加

对于我的 webpack 配置文件，但是当我在隐身加载包时比较网络时，无论有没有该配置，两者都是相同的。

同样运行构建会产生相同的输出。

有没有另一种方法可以确定它是否有作用？

我想要实现的是我网站上的每个页面都有自己的块，只有在导航到该页面时才会加载。

我正在尝试使用 webpack 4 min-css-extract-plugin 和 splitChunks 插件生成多个 css。

这是我的 webpack 配置。

这是我的css文件结构。

上面的配置只生成了styles_ar.css和style.css两个文件。在两个文件中都有共同的内容。

如何为公共文件生成单独的文件？

如果我优先考虑commons cacheGroup 只会生成一个文件commons.styl。

我有一个相当复杂的 web 应用程序，用 React/Redux 和 webpack 编写，用于编译。它的登陆页面由 2 张图片和主应用程序模块组成。所有其他模块都是延迟加载的，具体取决于用户想要做什么。当我使用 google devtools 进行审计时，我得到了 74 的性能分数，这还不错。

但在 iphone 上，初始页面加载时间超过 15 秒！我需要优化它。

图片 其中一张图片是 html body 的背景，以便在其他页面加载时显示。另一个是主页组件的背景。主页图像是不可协商的，它必须在那里。身体中的那个我更灵活，但看起来很酷。

现在主页图像使用 webpack url-loader 导入到 react 组件中，因此在应用程序包中。这是最好的方法吗？另一张图片直接加载到 body 元素上的 index.html 中。我不确定哪个是最快的方法。

我也不是图像专家，所以也许我还能做些什么来压缩或优化图像？是否有跨平台使用的“最佳尺寸”？还有用什么工具来改变？我的系统上有 GIMP，但可以使用其他东西。

Splash 如果用户在加载时看到“某些东西”，那就太好了，这样他们就可以更有耐心了。现在他们只看到一个空白的白色屏幕。我已经关注了所有的网站图标生成器，并根据指示进行了所有设置。但飞溅没有显示。有什么我可以在那里做的吗？我什至尝试在 HTML 中更改不同颜色的背景，但这也没有显示出来。

CSS 为了组织我的项目代码，我构建了非常组件化的所有内容。我的样式表大多位于每个组件旁边，并被导入到使用它的地方。这些也由 webpack 使用 miniCssExtractLoader 和 css-loader 捆绑。我附上了我的 webpack 配置——我可以在那里做些什么吗？

Webpack 我还能做些什么来缩短初始加载时间？这是我的 webpack.common 和 webpack.prod 设置。任何想法将不胜感激！

webpack.common.js

webpack.prod.js

当我使用 webpack 4 拆分 js 文件时，我得到 dist 目录包含：app.js、vendor.js 和另外一个 js 文件名 vendor~app.js，它是如何以及为什么出现的？

以下是这些文件：

这是我的 webpack 配置：

在我的 entry.js 中：

看起来很简单的不是我点击...我正在尝试创建三个单独的捆绑包：

(1) node-vendors-[hash].bundle.js：来自 node_modules 的东西包 (2) vendor-config-[hash].bundle.js：由供应商提供的所有脚本包，我们使用我们的网站和配置文件。 .. 考虑多种服务，例如 Google Analytics；我们在网站上使用的每个供应商都提供了一个包含帐户详细信息的片段 (3) 我们的自定义脚本

无论配置如何，我都会为上面#2 类别中的每个源文件获取一个包。

我每次得到的是 6 个捆绑包……上面的 #1 和 #3 一个包，但“供应商”文件夹中引用的每个脚本还有 4 个附加包。我知道我的optimization部分不正确，但无论我改变什么，我都无法让它工作。在搜索并尝试了大量示例之后，绝望地发布：/