问题标签 [code-splitting]

我在我的反应应用程序中启用了基于路由的分块。

我用过require.ensure

我的应用程序包含两条路线/home和/pro

这是我的route.js

Webpack 识别require.ensure并为 /home 和 /pro 创建一个单独的块

Home.js和ProHomejs对应。

现在的问题是，当我打开/home时，它​​应该只加载Home.js（/home 的块），但它也会加载ProHome.js。

如果是这种情况，那么使用基于路由的分块没有好处吗？

有没有更好的方法来路由基于分块？请指出正确的资源

My bundle size was around 2MB uncompressed and 400kb compressed

This bundle was created using webpack 1.15.0.

And the film strip is like this

This is the Webpackanalyzer output

Then i have updated webpack to 2.6.1 and enabled code spliting and moved all third party js to vendor.js, Now bundle.js was containing only my app's code.

My bundle size is like this

This is the uncompressed size.

But the load time increased to 7.09s

Then we tried chunking based on routes. using require.ensure. We thought the bundle which 1.75mb will be broken into small chunks based on routes. But each route's chunk was much bigger than expected. And the sum of the total routes chunk is more than the bundle.js size

Here is the final result after enabling route based chunking

As you can see bundle.js is reduced from 1.75MB to 180kb.

As I can see from WebpackBundle Analyzer , Each chunk has its node_modules inside each chunk. This node modules are same for all the chunks.

This is the comparision of two routes..

Is there any way to reduce the chunk size of each route ?

I am using CommonChunkPlugin.

在我的 webpack 中，我使用了具有 React、React Dom、Redux 等的外部组件。

现在，当我实现路由分块时，生成的每个块都会再次重新捆绑外部脚本，所以最终我的包大小非常大。

如何避免我的各个块不重新捆绑外部脚本并从外部使用它们。

编辑

使用https://chrisbateman.github.io/webpack-visualizer/我可以看到我所有的块都捆绑了公共库——这些库实际上应该来自externalswebpack。

编辑 2

网页包文件

路由文件

我正在通过CommonsChunkPlugin. 当我构建两次时，我希望供应商块保持不变，但它会改变:(

复制步骤：

1. 克隆https://github.com/mattcolman/webpack-vendor-chunk-test
2. 运行yarn，然后yarn analyzeBundle，然后yarn analyzeBundle再运行。
3. 请注意，供应商块哈希已更改。

两个捆绑包之间的差异表明TIME_STAMP我通过 提供的DefinePlugin最终在供应商块中，但是此代码始终位于检查 的代码块内"development" === 'test'，因此我原以为此代码会在生产中被删除。

我实际上希望注入的代码TIME_STAMP最终会出现在应用程序包中，这很好，但事实并非如此。

任何帮助，将不胜感激！提前致谢！

我正在努力遵循有关隐式通用供应商块的文档。

我希望所有人都node_modules在供应商块中。我有一个入口点 ( app)，有几个子块。我试过了：

-> 从入口块 (app.chunk.js) 中删除所有 node_modules，但将 node_modules 留在子项中

-> 从所有子块中删除 node_modules 但不是从应用程序...

寻找一种方法来做到这两点（从所有块中剥离 node_modules 并将它们放在 vendor.chunk.js 中）。

提前致谢，

PS：使用https://chrisbateman.github.io/webpack-visualizer/分析输出

我有类似于官方文档的代码拆分配置， 并且一切正常 - 我的所有节点模块都在“供应商”块中（包括“babel-polyfill”）。但是现在我需要移动 babel-polyfill 和它的所有依赖项来分离块（“polyfills”），以便能够在我的供应商包之前加载它。任何想法如何做到这一点？

我的配置：

主要问题是在使用 react-routerV4 和 webpack 2 进行代码拆分时，我有几个模块，我无法到达主要模块。

我的配置如下：

• 网页包 2.2.1
• 反应路线 4.1.1

我正在使用 react-router v4文档中的代码拆分

基本上，我不使用导入，但在路由配置上我有：像这样：

这对代码拆分非常有效，我为每个路由获得一个包，为 node_modules 获得另一个包，我稍后可以拆分。

我的问题是，我有一个 node_module (react-slick)，它位于多个捆绑包中。所以我想把它放在主包里。

我的 webpack 配置是：

根据文档，这应该可以解决问题：

但是什么也没发生，我的 3 个捆绑包中仍然有“react-slick”。

有没有人暗示发生了什么？

任何帮助表示赞赏:) 谢谢！

我有一个具有以下导入的路由提供程序：

以及下面的 webpack.config.js output: { path: path.resolve("../public"), filename: "[name].bundle.js", chunkFilename: "[name].bundle.js" }

当App.vue加载<router-view></router-view>组件时，它会抛出 404。

文件被正确拆分并放入我的/public文件夹中，但来自 vue 的初始 GET 不再指向该公共文件夹并直接进入我的根应用程序：

获取http://localhost/MyApp/Landing.bundle.js

代替http://localhost/MyApp/public/Landing.bundle.js

有任何想法吗？

编辑：

如果我将 a 添加publicPath到输出中，它所做的只是将 js 文件导出到，public/public/chuckfile.js但它也会尝试将我的所有其他资产引用到public/public

我在正确设置 webpack 以进行代码拆分时遇到了一些问题。我最终得到了很多重复的代码。

情况：

我有一个主项目，它是一个“配置”并部署到服务器。

然后是一个辅助项目“组件”，它基本上是“配置”项目的构建块。它被部署到私有 NPM 并在构建时被配置拉取。

一切正常，但是有很多重复的代码，除非我在生成 commons.js 的组件文件上使用“CommonsChunkPlugin”。但是我似乎无法让项目以这种方式运行。

您可以在这里看到文件大小非常正常。（与 commonchuncks）

由于大量重复代码，此处的文件大小太大。

现在我的问题是我是否要弄清楚如何使用“组件”中启用的 commonchunk 来运行它，或者我是否必须在“配置”中做一些 webpack 向导来解决这个问题。

组件 webpack.config.js

配置 webpack.config.js

提前致谢 ！

使用 react-router、redux 和 redux-saga 进行路由需要大量重复代码，请看这里。单条路线21条线路。在我的应用程序中，我有数十条路线，因此以某种方式将其干燥非常重要。否则这个文件routes.js将有 1000 多行。

有任何想法吗？