如何为现代浏览器将ES7/ES6 React项目转译为ES6并通过Nginx分发？

Absolutely you can—and this is a fantastic optimization that’ll cut down your bundle size and boost runtime performance. Let’s walk through exactly how to make this work:

1. Configure Babel to output ES6-compatible code #

First, you’ll need to adjust your Babel config to target modern browsers that support ES6 natively, instead of falling back to ES5. If you’re using @babel/preset-env, update your .babelrc (or babel.config.json) like this:

{
  "presets": [
    ["@babel/preset-env", {
      "targets": {
        "browsers": [
          "last 2 Chrome versions",
          "last 2 Firefox versions",
          "last 2 Safari versions",
          "last 2 Edge versions"
        ],
        "esmodules": true
      },
      "modules": false // Keep ES module syntax for better tree shaking
    }],
    "@babel/preset-react"
  ]
}

Next, set up your bundler (Webpack, Vite, etc.) to output two separate bundles: one ES6 version (let’s call it app.es6.js) and your existing ES5 fallback (app.es5.js). For Webpack, you can define multiple entry points or use a plugin to generate both builds automatically.

2. Serve the right bundle to the right browser #

You’ve got two solid options here:

Option A: Let the browser auto-select (no Nginx config needed) #

Use the type="module" and nomodule attributes in your HTML script tags. Modern browsers that support ES modules will load the ES6 bundle, while older browsers will fall back to ES5:

<!-- Modern browsers load this ES6 module -->
<script type="module" src="/app.es6.js"></script>
<!-- Older browsers ignore the module script and load this ES5 bundle -->
<script nomodule src="/app.es5.js"></script>

Option B: Server-side routing with Nginx #

If you prefer to handle the logic on the server, configure Nginx to sniff the user agent and serve the appropriate bundle. Add this to your Nginx config:

location /app.js {
  # Match modern browsers that support ES6
  if ($http_user_agent ~* "(Chrome/[6-9][0-9]|Firefox/[6-9][0-9]|Safari/[1-9][0-9]|Edge/[7-9][0-9])") {
    rewrite ^ /app.es6.js break;
  }
  # Fallback to ES5 for all other browsers
  rewrite ^ /app.es5.js break;
}

This way, users get the smallest, fastest bundle their browser can handle without any extra client-side logic.

3. Verify and optimize further #

• Check your bundles: Use your browser’s dev tools Network tab to confirm the right bundle loads for your browser. For example, Chrome should pull app.es6.js while an older IE instance gets app.es5.js.
• Leverage tree shaking: Since ES modules are static, your bundler can eliminate unused code far more effectively than with CommonJS (the format used in ES5 bundles). This will shrink your ES6 bundle even more.
• Test edge cases: Make sure to test on the oldest "modern" browser you’re targeting to confirm no syntax errors pop up.

This approach is widely used in production today—you’ll see noticeable improvements in load times and runtime speed, especially on modern devices.

内容的提问来源于stack exchange，提问作者R.Meredith