本地用未压缩JS/CSS、远程用压缩合并版，如何区分HTML头部？求最佳实践

Hey, I've run into this exact problem before—here are the best practices I've used to handle environment-specific asset references without the hassle of manual edits or messy gitignore workarounds:

This is the most common approach. Use a template engine (like EJS, Handlebars, or Pug) that checks an environment variable to switch between dev and production assets.

For example, with EJS:

<html>
<head>
  <% if (process.env.NODE_ENV === 'development') { %>
    <script src="script1.js"></script>
    <script src="script2.js"></script>
    <script src="script3.js"></script>
  <% } else { %>
    <script src="script123.min.js"></script>
  <% } %>
</head>
<body>
  <!-- Your content here -->
</body>
</html>

Just set NODE_ENV=development when running your local dev server, and NODE_ENV=production when building for deployment. The template engine will auto-generate the correct HTML. This keeps you working from a single file, no manual switching required.

Modern build tools are designed to handle this exact scenario—they’ll bundle/minify your assets and auto-generate the correct HTML for each environment.

Take Webpack as an example:

• Use html-webpack-plugin to generate your index.html
• Create separate config files: webpack.dev.js (disables minification, keeps individual JS entries) and webpack.prod.js (enables bundling/minification, outputs a single script123.min.js)
• Run webpack serve --config webpack.dev.js for local dev, and webpack --config webpack.prod.js for production builds

The tool handles all the asset switching for you—you never have to touch the HTML manually, and it integrates seamlessly with other build tasks like CSS processing or image optimization.

If you don’t want a full build setup, use a simple replacement tool like replace-in-file (npm package) or envsubst (built-in on Linux/macOS).

First, create a template file index.html.template:

<html>
<head>
  {{JS_ASSETS}}
</head>
<body>
  <!-- Your content here -->
</body>
</html>

Then add scripts to your package.json to swap the placeholder:

{
  "scripts": {
    "prepare:dev": "replace-in-file '{{JS_ASSETS}}' '<script src=\"script1.js\"></script><script src=\"script2.js\"></script><script src=\"script3.js\"></script>' index.html.template --output-file index.html",
    "prepare:prod": "replace-in-file '{{JS_ASSETS}}' '<script src=\"script123.min.js\"></script>' index.html.template --output-file index.html"
  }
}

Run npm run prepare:dev before local development, and npm run prepare:prod before deployment. You only maintain the template file, avoiding duplicate HTML edits.

If your project uses server-side rendering (Node.js, PHP, etc.), you can have the server return different HTML based on the environment.

Example with Node.js/Express:

app.get('/', (req, res) => {
  const isDevelopment = process.env.NODE_ENV === 'development';
  const jsAssets = isDevelopment 
    ? '<script src="script1.js"></script><script src="script2.js"></script><script src="script3.js"></script>'
    : '<script src="script123.min.js"></script>';

  res.send(`
    <html>
    <head>
      ${jsAssets}
    </head>
    <body>
      <!-- Your content here -->
    </body>
    </html>
  `);
});

This works great if your backend controls the HTML output—no frontend template files to manage, just server logic that handles the environment switch.

What to Avoid #

The gitignore workaround you mentioned is definitely a pain—syncing two versions of index.html is error-prone and kills productivity. All the above methods eliminate that manual work entirely.

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