构建庞大的应用程序资产
Structuring huge application assets
我们即将完全重建一个客户网站,它目前有 1000 多个页面。
会有一个剔除,但我的想法是根据页面上的内容动态加载资产,但我想获得反馈。
假设我目前有 100 个全局组件(旋转木马、按钮、视频、Nah 等),随着时间的推移,我们只是将所有组件的所有 javascript 放入一个 bundle.js 文件中,与css,但是,如果一个页面仅使用这 100 个组件中的 3 个,则包含所有内容似乎是多余的。
所以我想我的问题是在运行时仅动态请求使用的组件而不是每次都加载所有资产是否错误?
我看到的最大缺点是几乎每个页面都会请求新文件,因此缓存会更难,而且必须发出更多 HTTP 请求。
但是如果有人有更好的主意请告诉我
首先,我建议采用循证方法。没有数据就不要做任何决定。
我对整体方法的看法。我在写这篇文章时正在考虑 React,但没有什么是特定于 React 的。
- 服务器呈现您的内容。然后它将显示给您的用户,而不需要您的 JavaScript 捆绑包。
- 获取良好的 CDN and/or 之类的 varnish 并缓存每个 route/page 响应。无论网站有多大,您都会得到快速响应。
- 现在,当用户访问一个页面时,他们会很快得到它,然后然后你异步下载你的 JavaScript 文件,这将为页面注入活力。
- 因为用户已经在阅读您的页面,所以您可以慢慢加载 JS - 最多一两秒。如果您认为大多数用户都拥有不错的互联网(例如,他们都在韩国),那么在费心进行分块之前,我会使用 2mb 的 JS 包。意见会有所不同,这取决于你。如果您的用户的互联网质量很差(例如,他们都在朝鲜),那么每个 kb 都很重要,您的目标应该是制作每个页面所需的最小块。兼顾速度和尊重用户的下载配额。
我们即将完全重建一个客户网站,它目前有 1000 多个页面。
会有一个剔除,但我的想法是根据页面上的内容动态加载资产,但我想获得反馈。
假设我目前有 100 个全局组件(旋转木马、按钮、视频、Nah 等),随着时间的推移,我们只是将所有组件的所有 javascript 放入一个 bundle.js 文件中,与css,但是,如果一个页面仅使用这 100 个组件中的 3 个,则包含所有内容似乎是多余的。
所以我想我的问题是在运行时仅动态请求使用的组件而不是每次都加载所有资产是否错误?
我看到的最大缺点是几乎每个页面都会请求新文件,因此缓存会更难,而且必须发出更多 HTTP 请求。
但是如果有人有更好的主意请告诉我
首先,我建议采用循证方法。没有数据就不要做任何决定。
我对整体方法的看法。我在写这篇文章时正在考虑 React,但没有什么是特定于 React 的。
- 服务器呈现您的内容。然后它将显示给您的用户,而不需要您的 JavaScript 捆绑包。
- 获取良好的 CDN and/or 之类的 varnish 并缓存每个 route/page 响应。无论网站有多大,您都会得到快速响应。
- 现在,当用户访问一个页面时,他们会很快得到它,然后然后你异步下载你的 JavaScript 文件,这将为页面注入活力。
- 因为用户已经在阅读您的页面,所以您可以慢慢加载 JS - 最多一两秒。如果您认为大多数用户都拥有不错的互联网(例如,他们都在韩国),那么在费心进行分块之前,我会使用 2mb 的 JS 包。意见会有所不同,这取决于你。如果您的用户的互联网质量很差(例如,他们都在朝鲜),那么每个 kb 都很重要,您的目标应该是制作每个页面所需的最小块。兼顾速度和尊重用户的下载配额。