面试题：Webpack开发环境下如何优化多入口应用的打包速度

Question

假设你正在开发一个多入口的前端应用，在Webpack开发环境配置中，为了提升打包速度，你会从哪些方面进行优化？请详细阐述对应的优化策略和相关Webpack配置。

Answer 1

优化策略及Webpack配置

1. 减少模块搜索范围
   • 策略：指定 resolve.modules 为明确的目录，避免Webpack在不必要的地方搜索模块。通常将其设置为 node_modules 和项目的特定目录。
   • 配置：

   module.exports = {
     resolve: {
       modules: [path.resolve(__dirname, 'src'), 'node_modules']
     }
   };
   

2. 使用DLLPlugin和DLLReferencePlugin
   • 策略：将不常变化的第三方库提前打包成动态链接库（DLL），在后续打包时直接引用，而不是每次都重新打包。
   • 配置：
     • 生成DLL文件：

       const path = require('path');
       const webpack = require('webpack');
       
       module.exports = {
         entry: {
           vendor: ['react','react - dom']
         },
         output: {
           path: path.resolve(__dirname, 'dll'),
           filename: '[name].dll.js',
           library: '[name]_library'
         },
         plugins: [
           new webpack.DllPlugin({
             path: path.join(__dirname, 'dll', '[name].manifest.json'),
             name: '[name]_library'
           })
         ]
       };
       

     • 在主Webpack配置中引用DLL：

       const path = require('path');
       const webpack = require('webpack');
       
       module.exports = {
         //...其他配置
         plugins: [
           new webpack.DllReferencePlugin({
             context: __dirname,
             manifest: require('./dll/vendor.manifest.json')
           })
         ]
       };
       

3. 优化Loader配置
   • 策略：使用 include 和 exclude 来限制Loader处理的文件范围，避免不必要的文件处理。例如，Babel - Loader只处理项目的 src 目录下的文件。
   • 配置：

   module.exports = {
     module: {
       rules: [
         {
           test: /\.js$/,
           use: 'babel - loader',
           include: path.resolve(__dirname,'src'),
           exclude: /node_modules/
         }
       ]
     }
   };
   

4. 开启缓存
   • 策略：使用 cache - loader 对Loader的处理结果进行缓存，减少重复计算。
   • 配置：

   module.exports = {
     module: {
       rules: [
         {
           test: /\.js$/,
           use: ['cache - loader', 'babel - loader'],
           include: path.resolve(__dirname,'src')
         }
       ]
     }
   };
   

5. 多进程打包
   • 策略：使用 thread - loader 开启多进程打包，利用多核CPU提高打包速度。
   • 配置：

   module.exports = {
     module: {
       rules: [
         {
           test: /\.js$/,
           use: ['thread - loader', 'babel - loader'],
           include: path.resolve(__dirname,'src')
         }
       ]
     }
   };
   

6. 优化图片处理
   • 策略：对于图片等资源，根据图片大小采用不同的处理方式。小图片可以使用 url - loader 转换为Data URI，减少请求数；大图片使用 file - loader 直接输出文件。
   • 配置：

   module.exports = {
     module: {
       rules: [
         {
           test: /\.(png|jpg|gif)$/,
           use: [
             {
               loader: 'url - loader',
               options: {
                 limit: 8192,
                 name: 'images/[name].[ext]'
               }
             }
           ]
         }
       ]
     }
   };
   

7. 使用HappyPack
   • 策略：HappyPack将任务分解给多个子进程去并发执行，每个子进程处理完后将结果交回主进程。
   • 配置：

   const HappyPack = require('happypack');
   const os = require('os');
   const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length });
   
   module.exports = {
     module: {
       rules: [
         {
           test: /\.js$/,
           use: 'happypack/loader?id=js',
           include: path.resolve(__dirname,'src')
         }
       ]
     },
     plugins: [
       new HappyPack({
         id: 'js',
         threadPool: happyThreadPool,
         loaders: ['babel - loader']
       })
     ]
   };
   

8. 启用并行压缩
   • 策略：在生产环境打包时，对于压缩代码（如使用 terser - webpack - plugin），启用并行压缩。
   • 配置：

   const TerserPlugin = require('terser - webpack - plugin');
   
   module.exports = {
     optimization: {
       minimizer: [
         new TerserPlugin({
           parallel: true
         })
       ]
     }
   };