节点js - 用于http2的Bundler
[英]Node js - Bundler for http2
问题描述
我目前正在使用babel将es6代码转换为es5，并使用browserify捆绑它以在浏览器中使用它。 现在我开始使用http2服务器（Nginx）。
Http2在加载多个小文件而不是一个大包时更有效。
如何最好地提供多个js文件而不是一个大包？
2 个解决方案
解决方案1
1 2016-03-16 11:43:28
我知道SystemJS可以在开发中加载多个文件而不需要捆绑，对于生产，您可以使用DepCache来定义要导入的模块的依赖树
https://github.com/systemjs/systemjs/blob/master/docs/production-workflows.md
这种方法需要你抛弃browserfy并改为systemjs，因为它只使用bundle。
解决方案2
1 2016-03-16 23:16:18
我看到你到目前为止还没有得到你问题的答案。 因此，我试图帮助你，尽管HTTP / 2对我来说也是新的（它解释了我的答案的长篇文章:-)）。
有关HTTP / 2的详细信息可以在页面https://blog.cloudflare.com/http-2-for-web-developers/上找到。 我再说一遍：
- 停止连接文件
- 停止内联资产
- 停止分片域名
- 继续最小化CSS / JavaScript文件
- 继续从CDN加载
- 通过
<head>包含的<link rel='dns-prefetch' href='...' />继续DNS预取 - ...
我想补充两点关于设置HTTP头Cache-Control和Link的重要性：
- 考虑在页面的所有内容上设置
Cache-ControlHTTP标头（尤其是max-age，expires和etag）。 详情见下文。 我严格建议您阅读缓存教程 。 - 设置
LinkHTTP标头以使用HTTP / 2的SERVER PUSH。
HTTP标头的设置LINK:是使用HTTP / 2的服务器推送功能很重要（见这里 ， 这里 ）。 RFC5988和RFC2068的第19.6.1.2节描述了HTTP 1.1中已存在的特性。 每个人都知道Content-Type: application/json ，但是以同样的方式可以设置较少知道的Link: <...>; rel=prefetch Link: <...>; rel=prefetch ， 在这里描述。 例如，人们可以使用
Link: </app/script.js>; rel=preload; as=script
Link: </fonts/font.woff>; rel=preload; as=font
Link: </app/style.css>; rel=preload; as=style
在HTML页面上设置的此类链接（如index.html ）将通知HTTP服务器将资源与HTML页面上的响应一起推送 。 因此，您可以保存不需要的往返行程和后续请求（解析HTML文件后），并立即显示资源。 您可以考虑在页面上的所有图片上设置LINK标题，以提高页面的可见性。 在这里查看附带有漂亮图片的附加信息，这些信息展示了HTTP / 2服务器推送的优势。 如果您使用PHP，那么代码可能对您有意义。
大多数Web开发人员直接或间接地执行一些优化步骤 。 这些步骤在构建过程中或通过在HTTP响应中设置HTTP标头来完成。 人们必须审查一些流程关闭某人并包含另一个流程。 我试着总结一下我的结果。
- 您可以考虑使用webpack而不是browserify来排除合并中的某些依赖项。 我不太了解browserify，但我知道webpack支持
externals（见这里 ），它允许从CDN加载一些模块。 在下一步中，您可以删除任何合并，但最小化并设置所有模块的cache-control。 - 严格建议从CDN加载您使用的CSS / JS / Fonts，以及您自己未开发的。 你永远不应该将这些资源与你的JavaScript文件合并 （你现在可以用browserify做什么）。 从服务器加载Bootstrap CSS不是一个好主意。 应该更好地遵循这里的建议并使用CDN而不是本地下载所有文件。
如果您检查来自https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js的响应的HTTP标题，则使用CDN的主要原因很容易理解。 您将找到类似cache-control: public, max-age=30672000和expires:Mon, 06 Mar 2017 21:25:04 GMT 。 Chrome通常会显示Status Code:200 (from cache) ，您将看不到网络上的流量 。 如果您明确重新加载页面（通过按F5 ），您将看到222字节和Status Code:304的响应。 换句话说，文件通常根本没有加载。 jQuery 2.2.1永远保持不变 。 下一个版本将有另一个URL 。 HTTPS的使用确保用户将加载真正的jQuery 2.2.1。 如果还不够，那么您可以使用https://www.srihash.org/计算sha384值并使用<link>或<script>扩展形式：
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"
integrity="sha384-8C+3bW/ArbXinsJduAjm9O7WNnuOcO+Bok/VScRYikawtvz4ZPrpXtGfKIewM9dK"
crossorigin="anonymous"></script>
如果用户打开包含链接的页面，则会重新计算并验证sha384哈希值（通过Chrome和Firefox）。 如果文件还没有在本地缓存中，那么它也会很快加载。 从https://code.jquery.com/jquery-2.2.1.min.js加载相同文件的一个简短说法今天使用HTTP 1.1，但来自https://cdnjs.cloudflare.com/ajax/libs/ jquery / 2.2.1 / jquery.min.js使用HTTP / 2协议。 我建议通过选择CDN来测试协议。 您可以在此处找到支持HTTP / 2的CDN列表。 以同样的方式从https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css加载Bootstrap，今天会使用HTTP 1.1，但是可以通过加载相同的数据来使用HTTP / 2 https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css 。
我花了很多时间让CDN明确表示CDN的最大优点是设置HTTP响应的兑现标头和不可变URL的使用 。 您也可以在模块中执行相同的操作。
- 应该考虑从服务器返回的每个内容的缓存时间。 您可以使用包含组件版本号的模块的URL（如
/script/mycomponent1.1.12341），并在每次更改模块时更改版本号的最后一部分。 您可以在cache-control设置足够长的max-age值，并且您的组件将由客户端的Web浏览器缓存。
最后，我建议您验证是否安装了最新版本的OpenSSL和最新版本的nginx 。 我建议您在http://www.webpagetest.org/和https://www.ssllabs.com/ssltest/中验证您的网站，以确保您不会忘记任何简单的步骤。
Node JS：双向 GRPC 调用会打开多个 http2 连接吗？
[英]Node JS: Will a Bidirection GRPC Call Open Multiple http2 Connections?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.