框架工程项目-Webpack 的代码分割，异步加载资源文件

在使用Webpack进行框架工程项目开发时，实现代码分割和异步加载资源文件是提高应用加载速度和性能的关键技术。以下是根据您的需求整理的步骤和配置方法：

1. 代码分割

• 利用SplitChunksPlugin：Webpack内置的SplitChunksPlugin可以自动将公共模块分割到单独的chunk中，以达到复用和减小打包体积的目的。您可以在webpack.config.js中配置此插件或通过optimization.splitChunks选项来启用它。

  module.exports = {
  // ...其他配置
  optimization: {
    splitChunks: {
      chunks: 'all', // 对所有类型的chunk（同步、异步）进行分割
      minSize: 30000, // 分割前最小模块大小
      maxSize: 0, // 最大尺寸无限制
      minChunks: 1, // 被引用次数达到几次才进行分割
      maxAsyncRequests: 5, // 按需加载时并行请求数量的最大值
      maxInitialRequests: 3, // 页面初始化时最大并行请求数量
      automaticNameDelimiter: '~', // 文件名连接符
      name: true,
      cacheGroups: { // 自定义缓存组
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10,
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true,
        },
      },
    },
  },
  };
  

2. 异步加载资源

• 动态导入（Dynamic Imports）：使用import()表达式可以实现按需加载模块。这会告诉Webpack该模块应该被分割，并且只有在运行时请求该模块时才会加载。

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

• chunk命名与懒加载：在动态导入时，可以通过传递自定义的chunk名称来控制输出文件名，便于管理和调试。

  import(/* webpackChunkName: "my-feature" */ './featureModule.js').then(...);
  

注意事项

• 确保动态导入的模块路径正确，避免因路径错误导致的加载失败。
• 合理设置splitChunks配置，避免过度分割导致HTTP请求数过多，影响加载速度。
• 在生产环境中，确保开启代码压缩和Tree Shaking以进一步优化输出。

通过上述配置和实践，您可以有效地对Webpack项目进行代码分割和异步资源加载，从而提升应用的加载效率和用户体验。