2025年webpack代码分割（2025年webpack4代码分割）

splitChunks精细控制代码分割降低包大小

我们还可以通过 maxInitialRequests 和 maxAsyncRequests 来控制初始加载和异步加载的模块数量。例如，将 maxInitialRequests 配置为 1：js maxInitialRequests： 1 此时，初始加载的模块数量不会超过 1。

解决隐患 - `splitChunks`配置 在上述示例中，存在三方模块重复引用的问题。通过简单的`optimization.splitChunks`配置，实现了lodash的抽离，降低了单个入口文件的大小。

代码分割（SplitChunks）：配置Webpack的splitChunks插件，将公共代码拆分为独立的文件。这样，初始加载的文件体积会减小，用户体验得到提升。移除无用代码（Tree Shaking）：确保代码符合Tree Shaking的条件，即使用ES Modules语法（import/export）。通过eslint或dead-code-elimination插件检测并删除未使用的代码。

代码分割（SplitChunks）：通过配置Webpack的splitChunks插件，可以将公共代码拆分为独立的文件，从而减少vendor.js的体积。在uniapp中，还可以通过配置pages.json的chunk属性来实现页面的懒加载。