如何在Safari 9及更早版本中使用ES6且不阻塞其余JavaScript加载？

Hey there! Great question—dealing with legacy browsers like Safari 9 while leveraging modern ES6 syntax is a common headache, but there are reliable ways to ensure your other JavaScript code still loads and runs without getting blocked by unrecognized ES6 code. Here are the most practical solutions:

1. Transpile ES6 to ES5 with Babel #

This is the most widely used approach to bridge modern code and legacy browsers. The idea is to convert your ES6+ code into ES5 syntax that Safari 9 understands, while keeping your development workflow focused on modern standards.

• Use @babel/preset-env to target specific browsers (including Safari 9) in your build configuration. This ensures only the necessary features are transpiled, keeping your bundle size manageable.
• Example Babel config snippet (in .babelrc or your build tool settings):

  {
    "presets": [
      ["@babel/preset-env", {
        "targets": {
          "safari": "9"
        }
      }]
    ]
  }
  

• Integrate Babel with build tools like Webpack, Rollup, or Vite to automate transpilation during your build process. This way, you ship ES5-compatible code to Safari 9, while modern browsers can still get optimized ES6 code if you use differential serving (more on that next).

2. Use Differential Serving with module and nomodule #

This method lets you serve ES6 code to modern browsers and a transpiled ES5 fallback to legacy ones like Safari 9. Browsers that support ES modules will load the type="module" script, while older browsers (which don’t recognize type="module") will load the nomodule script instead—no parsing errors, no blocking.

• Example HTML setup:

  <!-- Modern browsers get ES6 modules -->
  <script type="module" src="/path/to/es6-app.js"></script>
  <!-- Safari 9 and other legacy browsers get transpiled ES5 -->
  <script nomodule src="/path/to/es5-app.js"></script>
  

• Note: Safari 9 doesn’t support ES modules, so it’ll ignore the first script and execute the second one. Modern browsers will execute the module script and ignore the nomodule version (since they recognize the module type).

3. Conditionally Load ES6 Code with Feature Detection #

If only a portion of your code uses ES6, you can check if the browser supports ES6 features before loading or executing that code. This prevents Safari 9 from attempting to parse ES6 syntax entirely.

• Example feature detection and dynamic import:

  // Check if the browser supports basic ES6 features
  const supportsES6 = (() => {
    try {
      // Test arrow functions and default parameters
      new Function('(a = 0) => a');
      return true;
    } catch (e) {
      return false;
    }
  })();
  
  if (supportsES6) {
    // Load and execute ES6 code for modern browsers
    import('./es6-feature.js').then(module => {
      module.init();
    });
  } else {
    // Load a fallback ES5 version for Safari 9
    import('./es5-feature.js').then(module => {
      module.init();
    });
  }
  

• This way, Safari 9 never touches the ES6 code, so it can’t throw parsing errors that block other scripts.

Key Notes to Avoid Blocking #

• Isolate ES6 code: Don’t mix ES6 and ES5 in the same script file. If a single script has unrecognized syntax, Safari 9 will fail to parse the entire file, potentially blocking subsequent scripts.
• Test in real Safari 9: Browser dev tools’ emulation might not perfectly replicate Safari 9’s behavior—test on an actual device or a dedicated legacy browser environment.
• Use defer or async appropriately: For non-module scripts, adding defer ensures scripts load in order without blocking HTML parsing, but this won’t fix syntax errors in ES6 code for legacy browsers.

Hope these solutions help you keep your application running smoothly across both modern browsers and Safari 9. Feel free to ask if you need deeper details on any of these steps!

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