面试题：Webpack作为静态模块打包器，如何实现代码分割及优化加载

Question

请阐述Webpack中实现代码分割的常见方法，并说明这些方法是怎样优化前端资源加载的，例如在单页应用场景下不同分割策略的应用场景和效果。

Answer 1

Webpack中实现代码分割的常见方法

1. Entry Points：在 webpack.config.js 中配置多个入口(entry)。

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

通过这种方式，Webpack 会为每个入口文件生成单独的 bundle。

2. SplitChunksPlugin：这是Webpack 4及以上版本内置的插件，用于抽取 chunks 中的公共模块。

module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all'
    }
  }
};

• chunks：取值有 initial（初始chunk）、async（异步chunk）、all（所有chunk）。当设置为 all 时，会对所有类型的chunk进行代码分割。

3. 动态导入（import()）：在ES2020模块语法中，使用 import() 进行动态导入。

// 懒加载模块
button.addEventListener('click', () => {
  import('./module.js').then((module) => {
    module.doSomething();
  });
});

Webpack会将通过 import() 导入的模块单独打包成一个chunk。

对前端资源加载的优化

1. 减少初始加载体积：通过代码分割，将不常用或较大的模块（如第三方库）从主bundle中分离出来，这样在页面初始加载时，只需要加载必要的代码，缩短了首次加载时间。
2. 实现按需加载：动态导入允许在需要时才加载特定的模块，比如某些功能只有在用户点击某个按钮后才需要，这样可以避免在页面加载时就加载所有代码，提升用户体验。
3. 利用浏览器缓存：当使用SplitChunksPlugin抽取公共模块时，公共模块会被单独打包。如果多个页面使用了相同的公共模块，浏览器可以从缓存中加载该模块，而不用重复下载。

单页应用场景下不同分割策略的应用场景和效果

1. Entry Points：

   • 应用场景：适用于明确知道哪些模块是独立的，并且在应用初始化时就需要加载的情况。比如将第三方库和应用的主逻辑分开，这样第三方库的bundle可以长期缓存。
   • 效果：通过分离不同功能模块的bundle，在首次加载时，可以并行加载多个bundle，利用浏览器的多线程加载能力，加快整体的加载速度。

2. SplitChunksPlugin：

   • 应用场景：适用于抽取多个chunk中的公共模块，特别是在应用中有大量复用的模块（如工具函数库、UI组件库等）。
   • 效果：公共模块被单独打包后，在多个页面或功能模块中复用，减少了整体的代码体积，提升了加载性能。同时，由于公共模块变化相对较少，其bundle可以被浏览器长期缓存。

3. 动态导入（import()）：

   • 应用场景：适用于实现功能的懒加载，比如某些页面的组件只有在用户切换到特定页面或执行特定操作时才需要加载。例如单页应用中的路由组件，只有在访问相应路由时才加载对应的组件代码。
   • 效果：极大地减少了初始加载的代码量，提高了页面的加载速度。并且，由于是按需加载，用户在使用应用过程中，也不会因为加载了过多暂时用不到的代码而造成性能问题。