代码分割

一、是什么

将代码拆分成多个 bundle,实现按需加载。

二、实现方式

  1. 动态 import
import('./module.js');
  1. 路由分割(React)
const Home = React.lazy(() => import('./Home'));
  1. SplitChunks
optimization: {
  splitChunks: {
    chunks: 'all';
  }
}

三、优势

  • 减少首屏加载
  • 提升性能

四、总结

代码分割本质:

按需加载 + 延迟执行