Webpack Chunk懒加载：import与require.ensure的区别及适用场景

Hey there! Let’s break down these two Webpack lazy loading approaches—since I’ve worked with both extensively, I can walk you through their key differences and when to use each.

First, let’s recap the two syntaxes for clarity:

require.ensure 写法 #

const Home = resolve => { 
  require.ensure(['components/Home/Home'], () => { 
    resolve(require('components/Home/Home')); 
  }, 'home'); 
};

import() 写法 #

const Home = import(/* webpackChunkName: "home" */ 'components/Home/Home');

• 语法标准差异：

  • require.ensure is a Webpack-exclusive custom API—it’s not part of any ECMAScript standard, built solely by Webpack to enable lazy loading back in the early days. It only works in Webpack environments.
  • import() is a formal ES2020 dynamic import standard. Almost all modern bundlers (Webpack, Rollup, Vite, etc.) support it, and it’s even natively supported by most modern browsers. It’s universal and future-proof.

• Async handling style：

  • require.ensure relies on callback functions to access the loaded module. You have to manually pass the module to the resolve callback, which leads to nested code that can get messy with complex async logic (hello, callback hell).
  • import() returns a Promise, so you can pair it with async/await for clean, readable async code:

    async function loadHomePage() {
      const HomeComponent = await import(/* webpackChunkName: "home" */ 'components/Home/Home');
      // Use the component here
    }
    

• Code simplicity：
  There’s no contest here—import() gets the job done in one line, while require.ensure requires nested boilerplate that’s harder to read and maintain over time.

• Long-term support：

  • require.ensure is considered a legacy API in Webpack 4+. While it still works for backward compatibility, Webpack’s official docs explicitly recommend using import() instead, and it may be phased out in future versions.
  • import() is the industry standard now. It’s supported across all modern tooling and browsers, making it the safe choice for ongoing projects.

• When to use require.ensure:

  • You’re maintaining a legacy project running Webpack 3 or older, and upgrading the codebase to use import() would be too time-consuming or risky.
  • You need to support extremely old browsers (like IE11) and can’t or don’t want to add a Promise polyfill (though this scenario is becoming increasingly rare as IE usage drops to near-zero).

• When to use import():

  • For any new project—it’s the standard, cleanest approach that aligns with modern frontend practices.
  • If you’ve upgraded to Webpack 4+—replacing require.ensure with import() will reduce technical debt and make your code easier to maintain.
  • When working with modern frontend framework routing (React, Vue, etc.)—official docs for framework lazy loading (like React’s React.lazy or Vue’s route splitting) explicitly recommend using import():

    // React example with lazy loading
    const Home = React.lazy(() => import(/* webpackChunkName: "home" */ './Home'));
    

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