代码分割webpack

Webpack中的代码分割是一种策略，它允许你将JavaScript应用分解为更小的部分，以提高性能和开发效率。常见的方法有：

1. **基于入口文件**[^1]:
- 定义多组入口点（如`entry`选项中作为对象的形式），每个入口对应一个单独的bundle。例如：

     entry: {
       index: './src/index.js',
       another: './src/another-module.js'
     },

- 这样可以针对每个功能或页面创建独立的代码包，但需要注意重复模块的问题，如两个入口都依赖于`lodash`。

2. **限制重复模块**:
- 为了减少冗余，可以利用插件如`CommonsChunkPlugin`来提取共享模块到公共chunk，避免不必要的重复打包。如果两个入口都引用了`lodash`，这个插件可以帮助你在多个bundle之间复用这部分代码。

3. **动态导入（dynamic imports）**:
- 使用`async`/`await`配合`import()`函数可以在运行时决定何时加载某个模块，这样可以根据用户的交互或其他条件动态地分割代码。

4. **懒加载（lazy loading）**:
- 对于非首屏加载的内容，可以使用懒加载技术，只在用户滚动到相关区域时才请求对应的bundle，进一步优化资源使用。

通过组合这些方法，Webpack能够实现更灵活、高效的代码分割策略，适应不断变化的开发需求和性能优化目标。