File Bundling and HTTP/2: Rethinking Best Practices

Welcome to subscribe to our latest JavaScript newsletter and click here to subscribe

Now almost all JavaScript applications use the build process. Even if you are not translating from ES2015 or TypeScript, it has become standard practice to do some form of connection and compression to your code. The reason is that there is considerable overhead in making HTTP requests. Less serviced, larger files are more efficient than many smaller files served. With the adoption of the next version of HTTP/2, the underlying protocol for the network, it may be time to rethink best practices.

HTTP/2 is based on Google's SPDY protocol, which is designed to improve page loading latency and improve security based on the existing HTTP 1.1 standard. Work on this new protocol began in 2012, with the first development version being a direct copy of SPDY. The final standard was released in May 2015, and in May this year, Google announced that they will no longer support SPDY in Chrome.

How is HTTP/2 different from its predecessor? One major difference is that HTTP/2 is a binary protocol, not a text-based protocol. This makes it more compact, more resolute and less error-prone. A key advantage of this protocol is that it is multiplexed, which means that multiple files can be transferred on a single connection. Another widely publicized feature is server push, which allows the server to transfer resources to the client before the client requests, pre-filling the cache.

The support for the new protocol is very good, including all mainstream browsers. On the server side, it is supported by Apache2, Nginx, and Microsoft IIS, and it is also supported by Node.js 5.0 and above. Most browser vendors say they will only support HTTP/2 on TLS connections, but with the advent of Let’s Encrypt’s free SSL certificate, it’s an easy requirement. According to data collected by W3Techs in June this year, about 8.4% of the top 10 million websites now support the new agreement. If you are a Chrome user, you can use the HTTP/2 and SPDY indicator extensions to get a clear view of which websites you visit serve through HTTP/2.

What does the adoption of HTTP/2 mean for JavaScript developers? Our current practice of connecting multiple files into bundles makes it difficult for browsers to cache our code efficiently: changing a line of code in a module requires re-downloading the entire bundle file. Since HTTP/2 multiplexing makes requests relatively cheap, we have the option to split the code into smaller bundles and make better use of the cache to ensure that our application effectively utilizes the user's bandwidth.

But if the request is cheap, should we give up on the bundle altogether? At first glance this seems to make sense, but the cost of HTTP requests is not the only factor to consider. Web servers also limit how efficiently they can serve large amounts of files. With the surge in JavaScript community moving to smaller, more centralized modules, providing these files to clients without some kind of bundling will not be ideal. Most importantly, combining files together can achieve better compression, thus saving bandwidth.

So, when should you consider switching to HTTP/2? The answer is, it depends on the situation. Although the browser support is very good, if your target audience is still stuck on older versions of IE, you are in bad luck, so check your visitor statistics to see if this might benefit most users . What I get from all this is that the support and adoption of the new protocol is surprisingly going well, and as developers, it is a trend that we can't ignore.

What kind of bundling strategy do you use? Are you considering switching to HTTP/2, or maybe you have already switched? Please let me know in the comments!

FAQs (FAQs) about file bundling and HTTP/2

What are the main advantages of HTTP/2 over HTTP/1?

HTTP/2 has several advantages over HTTP/1. One of the most significant advantages is its ability to multiplex multiple requests over a single TCP connection. This feature reduces the latency that can occur when making multiple requests, thereby improving overall performance of your web application. HTTP/2 also supports header compression, which reduces overhead and supports server push, allowing the server to send resources to the client before the client requests.

How does file bundles work in HTTP/2?

In HTTP/2, file bundling is no longer as necessary as in HTTP/1. This is because HTTP/2 can handle multiple requests on a single connection at once, eliminating the need to bundle files together to reduce the number of requests. Instead, files can be loaded separately, which can improve cache utilization and simplify file management and updates.

What is multiplexing in HTTP/2?

Multiplexing is a key feature of HTTP/2, which allows multiple requests and responses to be sent simultaneously over a single TCP connection. This is a major improvement to HTTP/1, which can only handle one request per connection. Multiplexing reduces latency associated with multiple requests, thereby improving the performance of web applications.

How does server push in HTTP/2 work?

Server push is a feature in HTTP/2 that allows the server to send resources to the client before the client requests. This can improve the performance of web applications by reducing the time it takes for clients to receive and render resources. The server can push the resources it expects the client to need based on the initial request.

Why is file bundling considered bad practice in HTTP/2?

In HTTP/2, file bundling is considered bad practice because it eliminates some of the key advantages of the protocol. HTTP/2 is designed to handle multiple requests on a single connection at the same time, so bundling files together may actually degrade performance as it creates larger, more complex files that take longer to process and renew.

What impact does HTTP/2 have on SEO?

HTTP/2 may have a positive impact on SEO as it can improve website speed and performance. Faster sites tend to rank higher in search engine results because page loading speed is the ranking factor. In addition, HTTP/2's multiplexing and server push functions can improve the user experience, which also helps improve SEO.

How to improve security at HTTP/2?

HTTP/2 improves security by supporting the use of HTTPS, which encrypts data sent between the client and the server. This prevents sensitive information from being intercepted or tampered during transmission. In addition, HTTP/2's binary frame mechanism can help prevent attacks against HTTP/1 protocol.

How does HTTP/2 affect mobile browsing?

HTTP/2 can significantly improve mobile browsing by reducing latency and increasing the speed of web applications. This is especially beneficial for mobile users who often use slower internet connections. HTTP/2's multiplexing and server push capabilities can also improve the performance of mobile applications.

Can I use HTTP/2 in older browsers?

Most modern browsers support HTTP/2, but older browsers may not. If the client does not support HTTP/2, the server will usually fall back to using HTTP/1. It should be noted that while HTTP/2 has many benefits, it is not a replacement for good coding practices and should be used as part of a broader performance strategy.

How to check if my website is using HTTP/2?

There are some online tools that check if the website is using HTTP/2, such as HTTP/2 testing. You can also manually check by checking the network protocol in the browser developer tools. If your website is not using HTTP/2, you may need to update your server software or configuration.

The above is the detailed content of File Bundling and HTTP/2: Rethinking Best Practices. For more information, please follow other related articles on the PHP Chinese website!