前端如何进行高效的分包如何正确地进行分包

146 阅读 0 评论 97 点赞

我是靠谱客的博主温暖啤酒，最近开发中收集的这篇文章主要介绍前端如何进行高效的分包如何正确地进行分包，觉得挺不错的，现在分享给大家，希望可以做个参考。

如何正确地进行分包

为什么需要进行分包，一个大的 bundle.js 不好吗？

极其不建议，可从两方面进行考虑:

webpack(或其他构建工具) 运行时代码不容易变更，需要单独抽离出来，比如 webpack.runtime.js。由于其体积小，必要时可注入 index.html 中，减少 HTTP 请求数，优化关键请求路径

React(Vue) 运行时代码不容易变更，且每个组件都会依赖它，可单独抽离出来 framework.runtime.js。请且注意，务必将 React 及其所有依赖(react-dom/object-assign)共同抽离出来，否则有可能造成性能损耗，见下示例

假设仅仅抽离 React 运行时(不包含其依赖)为单独 Chunk，且每个路由页面为单独 Chunk。某页面不依赖任何第三方库，则该页面会加载以下 Chunk

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。