在 React 项目中处理包拆分的智能方法

如何解决在 React 项目中处理包拆分的智能方法

我的要求： 我想将主包分成更小的多个包。当我加载特定页面时，应该只加载与该页面关联的包，而不是加载所有包。

我尝试过的： 我尝试使用 html-webpack-plugin 使用 webpack 中使用的多个包创建 index.html。 参考：

1. https://medium.com/a-beginners-guide-for-webpack-2

我将整个网站功能拆分为几个模块，并且在我的 router.js 中使用了延迟加载

我面临的问题： 我可以看到创建了 30bundle，但在每个页面上加载了所有 30bundle。

WEBPACK：我只粘贴了 html-webpack 更改

var HtmlWebpackPlugin = require("html-webpack-plugin");
plugins: [
new HtmlWebpackPlugin({
            filename: "./src/main/webapp/index.html" //relative to root of the application
        })
]

谁能建议我应该检查/遵循什么方法？

谢谢！！

解决方法

以下是在 React 应用程序中实现有效代码拆分的步骤：

• 使用 react-loadable 实现基于组件的代码拆分并按需加载应用程序不同部分的 Javascript 包。
• 使用 import("./index").then 技巧将多个经常一起使用的组件分块到一个文件中。
• 使用神奇注释 /* webpackChunkName: xxx */ 命名您的块并优化包大小，使其既不太小也不太大。
• 使用 source-map-explorer 确定可能的代码拆分候选对象。

以下是了解有关该主题的更多信息的一些好地方：

• 动态导入：https://developers.google.com/web/updates/2017/11/dynamic-import
• React 官方文档：https://reactjs.org/docs/code-splitting.html
• 反应加载：https://github.com/jamiebuilds/react-loadable
• Webpack 中的块命名：https://github.com/webpack/webpack/tree/master/examples/code-splitting-specify-chunk-name