我的应用程序如何拆分为块
我的应用程序主要和唯一的条目块包含一些在整个应用程序中重用的常见逻辑，例如布局或辅助方法以及与身份验证相关的组件，如登录/注册对话框。此块在其依赖关系树中具有react，react-dom，redux，react-router以及node_modules目录中的一些其他库，因为它们正由身份验证组件使用
所有这些依赖项都捆绑在一个最初加载的app.js文件中。每当用户开始使用需要登录用户的应用程序的某些部分（例如仪表板，表单和其他应用程序功能）时，将加载包含该功能的其他javascript块。这些额外的块由webpack自动生成，因为在整个应用程序代码中分发了import()个调用。
当新用户加载应用程序但未登录时，会加载app.js并向用户显示登录掩码。用户成功登录并重定向到主仪表板后，将异步加载仪表板的代码。此代码由dashboard.js自动构建到webpack块中，也取决于已经烘焙到app.js块中的许多库（例如react，{{1}等）。由于react-dom块不会复制这些库，因此与dashboard.js相比，它非常小。
要充分利用浏览器缓存，所有这些块（在此简化
示例：条目块app.js和动态块app.js）具有
dashboard.js在他们的名下。与[chunkhash]的库代码相比，动态块的代码和实际应用程序代码的node_modules部分都发生了很大的变化。
我想做什么
我想以检测来自哪些库的方式配置app.js
webpack用于超过2个（或任何可配置数量）的块和
自动将它们分成另一个块node_modules。
此块应包含当前vendor.js的库部分，这些部分不会经常更改，因此用户不会经常重新下载库代码。
从我的理解，这样的事情可以做到
手动添加大量条目块时app.js。我也可以吗
使用CommonsChunkPlugin调用执行动态代码拆分？
实施例
我可以在import()中的某处使用lodash.partialRight。只要它只在那里使用，我希望它与dashboard.js捆绑在一起。我也在登录/注册过程中使用它的那一刻，它不应该捆绑到
dashboard.js现在的方式，但应该自动捆绑到app.js与其他库重复使用的库。
答案 0 :(得分：-1)
您必须明确列出要添加到vendor.js的库。 https://webpack.github.io/docs/code-splitting.html#split-app-and-vendor-code
未在＆＃34;供应商＆＃34;中列出的其余代码和node_modules将由webpack自动拆分。所以你在
中列出的库越多vendor: ["jquery", "underscore", ...],
较大的vendor.js文件，但用户重新下载频率较低。