如何在同一网页同时实现页面专属JS与减少HTTP请求？

Hey there, I’ve been in your exact situation—building out page-specific features leads to a pile of JS files, and suddenly your site’s load time takes a nosedive from all those HTTP requests. Let’s break down the most effective fixes I’ve used (and seen other devs swear by):

First off, start bundling. Tools like Webpack, Vite, or Rollup let you combine multiple JS files into fewer, optimized bundles. For multi-page apps, you can configure your bundler to create page-specific bundles (e.g., checkout.bundle.js for your checkout page, product.bundle.js for product pages) instead of one giant bundle that loads everywhere.

For example, in Webpack, use the splitChunks plugin to pull out shared code (like utility functions or third-party libraries) into a separate vendor.bundle.js—this way, visitors only load that shared bundle once, not on every page.

Take bundling a step further with code splitting. Use dynamic imports to load JS only when it’s needed, not on page load.

If you have a component or feature that’s not critical for the initial page render (like a modal that pops up when a user clicks a button), load its JS on demand:

document.getElementById('open-modal-btn').addEventListener('click', async () => {
  const modalModule = await import('./modal.js');
  modalModule.initModal();
});

For routing-based apps (like React or Vue), set up route-level splitting so each route loads only its own JS chunk.

Don’t skip minification—tools like Terser strip out whitespace, comments, and shorten variable names to shrink file sizes. Then, enable server-side compression (Gzip or Brotli) to make the bundles even smaller during transmission.

Most hosting providers or servers (like Nginx, Apache) let you enable this with a few config lines. For example, in Nginx, add:

gzip on;
gzip_types text/javascript application/javascript;

If you have small, critical pieces of JS that your page needs to render properly (like a hero slider’s initialization code), inline it directly in your HTML’s <script> tag. This eliminates an extra HTTP request for that code, which can make a big difference for above-the-fold content.

Just keep the inline code minimal—you don’t want to bloat your HTML. Non-critical JS can still be loaded asynchronously or deferred.

Do a quick audit of your JS files—chances are, you’ve got duplicate functions or library imports across multiple pages. Extract that shared code into a single utility file, then import it where needed. This reduces the total amount of JS you’re loading and cuts down on redundant requests.

If your server supports it, switching to HTTP/2 (or the newer HTTP/3) can drastically improve how multiple requests are handled. Unlike HTTP/1.1, HTTP/2 allows multiplexing—meaning multiple requests can be sent over a single TCP connection, reducing the overhead of establishing multiple connections. This won’t reduce the number of requests, but it will make them load much faster.

Start with bundling and code splitting—those usually deliver the biggest performance wins right out the gate. After each change, use tools like Lighthouse or WebPageTest to measure the impact and tweak as needed.

内容的提问来源于stack exchange，提问作者Mandar Chavan