一：方式

（1）入口分离

   定义：通过配置多个入口文件，将不同入口的代码打包成独立的文件，适用于多页面应用或功能模块拆分‌

   代码：

module.exports = {
  entry: {
    main: './src/main.js',
    vendor: './src/vendor.js'
  },
  output: {
    filename: '[name].bundle.js'
  }
};

   局限性：不同入口若引入相同依赖，可能导致重复加载

（2）动态导入

   定义：使用 import() 语法实现按需加载，Webpack 会自动将模块分割为独立 chunk‌

   代码：

import(/* webpackChunkName: "home" */ '../component/home.vue')
  .then(module => { /* 使用模块 */ });

   优点：减少初始加载体积

   缺点：需处理异步逻辑

（3）SplitChunksPlugin 自动分包

   定义：通过配置 optimization.splitChunks 自动提取公共模块或第三方库

   代码：

module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all'
        }
      }
    }
  }
};

   优点：提升缓存命中率

   缺点：配置复杂度较高

（4）运行时分包

   定义：将 Webpack 的运行时代码单独打包，避免因公共代码变更导致缓存失效‌

   代码：

module.exports = {
  optimization: {
    runtimeChunk: 'single'
  }
};

（5）预加载/预获取

   定义：通过注释 /* webpackPreload: true */ 或 /* webpackPrefetch: true */ 优化资源加载优先

   代码：

webpackPreload: true
webpackPrefetch: true

二：总结

1：入口分离=>多页面应用、独立功能模块‌

2：动态导入=>按需加载的非首屏模块‌

3：SplitChunksPlugin‌=>公共代码、第三方库优化‌

4：运行时分包=>长期缓存优化

5：预加载/预获取=>关键资源加速加载‌