面试题：Svelte项目构建工具Webpack的优化配置

Question

假设你在一个大型Svelte项目中使用Webpack作为构建工具。项目目前存在打包速度慢、输出文件体积大的问题。请阐述你会从哪些方面对Webpack进行优化配置，例如代码拆分、Tree - shaking、Loader优化等，并说明具体的配置思路和可能用到的插件。

Answer 1

代码拆分

1. 配置思路：使用Webpack的splitChunks插件，将代码按不同的规则拆分成多个文件，例如按路由拆分、按第三方库拆分等。
2. 具体配置：

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

3. 可能用到的插件：无，Webpack内置splitChunks功能。

Tree - shaking

1. 配置思路：利用ES6模块的静态结构，Webpack在打包时去除未使用的代码。确保项目使用ES6模块，并且在package.json中设置"sideEffects": false（如果项目所有代码都无副作用），或者指定有副作用的文件。
2. 具体配置：在webpack.config.js中，确保mode设置为'production'，因为生产模式下Webpack默认开启Tree - shaking。

module.exports = {
  mode: 'production'
};

3. 可能用到的插件：无，Webpack生产模式默认支持。

Loader优化

1. 配置思路：
   • 减少Loader处理范围：通过include和exclude属性指定Loader只处理特定目录下的文件。
   • 缓存Loader结果：对于一些耗时的Loader，如Babel，可以启用缓存。
2. 具体配置：

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            cacheDirectory: true
          }
        }
      }
    ]
  }
};

3. 可能用到的插件：无，Loader自身可配置相关优化。

优化图片加载

1. 配置思路：使用image - webpack - loader对图片进行压缩，减少图片体积。
2. 具体配置：

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: 'images/[name].[ext]'
            }
          },
          {
            loader: 'image-webpack-loader',
            options: {
              mozjpeg: {
                progressive: true,
                quality: 65
              },
              // optipng.enabled: false will disable optipng
              optipng: {
                enabled: false
              },
              pngquant: {
                quality: [0.65, 0.90],
                speed: 4
              },
              gifsicle: {
                interlaced: false
              },
              // the webp option will enable WEBP
              webp: {
                quality: 75
              }
            }
          }
        ]
      }
    ]
  }
};

3. 可能用到的插件：image - webpack - loader

启用多进程打包

1. 配置思路：使用thread - loader，它会开启多个子进程，将任务分配给这些子进程并行处理，从而加速打包。
2. 具体配置：

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: [
          'thread-loader',
          {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset - env']
            }
          }
        ]
      }
    ]
  }
};

3. 可能用到的插件：thread - loader

压缩CSS和JS

1. 配置思路：
   • CSS：使用OptimizeCSSAssetsPlugin压缩CSS文件。
   • JS：Webpack生产模式默认使用TerserPlugin压缩JS文件，可以进一步配置。
2. 具体配置：

const OptimizeCSSAssetsPlugin = require('OptimizeCSSAssetsPlugin');
const TerserPlugin = require('terser - webpack - plugin');

module.exports = {
  optimization: {
    minimizer: [
      new TerserPlugin({
        parallel: true,
        terserOptions: {
          compress: {
            drop_console: true // 移除console.log
          }
        }
      }),
      new OptimizeCSSAssetsPlugin({})
    ]
  }
};

3. 可能用到的插件：OptimizeCSSAssetsPlugin、TerserPlugin