react.js - 关于React 按需加载的问题？

问题描述

问 题

如题。关于实现React按需加载的疑问。

有三个路由A:/route/home/, B:/route/about, C:/route/contact。

有26个组件分别为1,2,3....26

路由A 用到了1-10组件。
路由B 用到了5-20组件。
路由C 用到了15-26组件。

1.不能将所有组件打包成一个文件，因为这个文件太大
2.不能将所有组件分开打包，因为请求太多
3.不能将每个路由的组件单独打包一次，因为部分代码会重复打包

这种情况下，怎么实现按需打包和按需加载，并且能复用前面加载过的组件代码。

感觉有点不合常理? 。跪求，在线等。

解决方案

通常webpack不会这样分割模块的，如果确实这么分割了，你可能需要在配置文件里的plugins中添加两个插件

new webpack.optimize.DedupePlugin(),
Search for equal or similar files and deduplicate them in the output. This comes with   some overhead for the entry chunk, but can reduce file size effectively.

new webpack.optimize.AggressiveMergingPlugin(),
A plugin for a more aggressive chunk merging strategy. Even similar chunks are merged if the total size is reduced enough. As an option modules that are not common in these chunks can be moved up the chunk tree to the parents.

再次打包之后如果还是觉得不满意，就去https://github.com/webpack/do...查看更多optimize这一节的更多内容

这篇关于react.js - 关于React 按需加载的问题？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！