面试题：Webpack中代码分割与懒加载如何协同提高前端性能

Webpack实现代码分割的基本方式

Entry Points：在webpack.config.js中配置多个entry入口，每个入口对应一个独立的chunk。例如：

module.exports = {
  entry: {
    app: './src/app.js',
    vendor: './src/vendor.js'
  },
  output: {
    filename: '[name].[chunkhash].js',
    path: path.resolve(__dirname, 'dist')
  }
};

这样不同入口的代码会被分割成不同的文件，实现代码分割。 2. SplitChunksPlugin：Webpack 4+ 内置的插件。可以对entry chunks 和async chunks进行代码分割。比如抽取第三方库到单独文件：

module.exports = {
  //...其他配置
  optimization: {
    splitChunks: {
      chunks: 'all'
    }
  }
};

上述配置会将所有模块中被共享的部分抽取到单独的chunk中。

Webpack实现懒加载的基本方式

动态导入（Dynamic Imports）：在ES2020中引入了动态import()语法，Webpack支持这种语法来实现懒加载。例如：

function loadComponent() {
  return import('./components/MyComponent.js')
  .then(({ default: MyComponent }) => {
      // 使用MyComponent
    });
}

当loadComponent函数被调用时，MyComponent.js才会被加载。 2. 路由懒加载（常用于单页应用）：在使用路由库（如React Router、Vue Router）时结合动态导入实现。以React Router为例：

import React from'react';
import { BrowserRouter as Router, Routes, Route } from'react-router-dom';

const Home = React.lazy(() => import('./components/Home'));
const About = React.lazy(() => import('./components/About'));

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<React.Suspense fallback={<div>Loading...</div>}><Home /></React.Suspense>} />
        <Route path="/about" element={<React.Suspense fallback={<div>Loading...</div>}><About /></React.Suspense>} />
      </Routes>
    </Router>
  );
}

只有当用户访问相应路由时，对应的组件才会被加载。

协同工作优化前端应用性能

加载时间：
- 代码分割：将代码分割成更小的chunk，初始加载时可以只加载必要的代码，减少初始加载文件的大小，缩短首次加载时间。例如将第三方库和业务代码分割，第三方库变更频率低，浏览器可以缓存，后续加载业务代码时若第三方库缓存未失效，则无需重复下载。
- 懒加载：延迟非必要代码的加载，在需要时才加载。比如在单页应用中，用户未访问到某个路由对应的页面时，该页面的代码不会被加载，进一步减少初始加载量，加快页面显示速度。
资源利用：
- 代码分割：合理的代码分割可以避免重复打包相同的模块，提高资源利用率。例如多个页面都依赖某个公共库，通过代码分割将该公共库抽取到单独文件，各个页面共用这一文件，减少了存储空间。
- 懒加载：按需加载代码，避免加载用户可能永远不会用到的代码，从而更有效地利用网络资源和内存资源。在用户使用过程中，只有实际需要的代码才会被加载到内存中，提高了内存的使用效率。

星途面试题库

面试题：Webpack中代码分割与懒加载如何协同提高前端性能

知识考点

面试题答案

Webpack实现代码分割的基本方式

Webpack实现懒加载的基本方式

协同工作优化前端应用性能