面试题：Webpack代码分离之高级难度：动态导入与代码分离的优化策略

Question

在一个大型前端单页应用中，存在多个路由页面，每个页面都有一些相对独立的功能模块。使用Webpack的动态导入（import()语法）实现按需加载模块，并结合splitChunks进行代码分离。请阐述你如何配置Webpack以确保在动态导入时，代码分离的颗粒度既不过粗也不过细，避免过多的HTTP请求或单个文件过大影响加载性能，同时要考虑公共模块的提取和复用。

Answer 1

1. Webpack 配置文件（一般为 webpack.config.js）：
   • 动态导入（import() 语法）：在前端代码中，使用 import() 实现动态导入模块。例如，在路由组件中：

   const routes = [
     {
       path: '/home',
       component: () => import('./components/Home.vue')
     },
     {
       path: '/about',
       component: () => import('./components/About.vue')
     }
   ];
   

   • splitChunks 配置：

   module.exports = {
     //...其他配置
     optimization: {
       splitChunks: {
         chunks: 'all',
         minSize: 30000, // 分离出的文件最小大小，避免颗粒度过细
         maxSize: 250000, // 单个文件最大大小，避免单个文件过大
         minChunks: 1,
         cacheGroups: {
           vendor: {
             test: /[\\/]node_modules[\\/]/,
             name:'vendors',
             chunks: 'all'
           },
           common: {
             name: 'common',
             minChunks: 2,
             chunks: 'initial',
             enforce: true
           }
         }
       }
     }
   };
   

   • 解释：
     • chunks: 'all' 表示对所有类型的chunk（包括初始、异步和动态导入的chunk）都进行代码分离。
     • minSize 设置为30000字节（约30KB），确保分离出的文件有一定大小，避免过多的HTTP请求（颗粒度过细）。
     • maxSize 设置为250000字节（约250KB），限制单个文件大小，避免加载性能受影响。
     • minChunks 设置为1表示只要被引用一次就可以分离出来（这里结合动态导入，每个动态导入的模块都可能独立分离）。
     • cacheGroups 中：
       • vendor 组用于提取 node_modules 中的模块，将它们打包到 vendors 文件中，实现公共模块（第三方库）的复用。
       • common 组用于提取至少被两个模块引用的公共代码，打包到 common 文件中，名称为 common。minChunks: 2 确保只有公共模块才会被提取，enforce: true 表示即使不符合 minSize 也强制分离。这样可以有效提取和复用公共模块，同时保证代码分离的颗粒度适中。