面试题：JavaScript性能优化之Webpack优化策略

代码分割

按需加载（动态导入）
- 策略：使用ES2020的动态导入语法（import()），Webpack会自动将这些导入的模块分割成单独的文件。例如，在路由组件中，如果某个组件不是一开始就需要的，可以这样导入：
```
const router = new VueRouter({
  routes: [
    {
      path: '/about',
      component: () => import('./components/About.vue')
    }
  ]
});
```
- 性能提升：减少初始加载的代码量，用户只加载当前需要的代码，加快首屏加载速度。后续需要其他模块时再异步加载，提高应用的响应性。

SplitChunksPlugin 配置

策略：Webpack的SplitChunksPlugin可以手动配置代码分割。在webpack.config.js中进行如下配置：

module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all',
      minSize: 30000,
      minChunks: 1,
      maxAsyncRequests: 5,
      maxInitialRequests: 3,
      automaticNameDelimiter: '~',
      name: true,
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true
        }
      }
    }
  }
};

性能提升：可以将第三方库和公共模块提取出来，避免重复打包，多个页面或模块可以共享这些提取出来的代码块，减少整体的文件大小，提升加载性能。

加载器配置

优化 Babel-loader
- 策略：
  - 缓存：在webpack.config.js中给babel-loader配置cacheDirectory选项，例如：
```
module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            cacheDirectory: true
          }
        }
      }
    ]
  }
};
```
  - 只转译需要的代码：使用@babel/preset - env的useBuiltIns选项，例如{ useBuiltIns: 'usage', corejs: 3 }，这样Babel只会转译项目中实际使用到的ES6+特性对应的Polyfill，而不是全部引入。
- 性能提升：缓存可以避免重复编译相同的代码，提高构建速度。只转译需要的代码可以减少打包后的文件体积，从而提升加载性能。
图片加载器优化
- 策略：对于图片，可以使用url - loader或file - loader。如果图片较小，可以使用url - loader将图片转换为Base64编码嵌入到CSS或JavaScript中，减少HTTP请求。例如：
```
module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192 // 8KB以下的图片转Base64
            }
          }
        ]
      }
    ]
  }
};
```
- 性能提升：减少HTTP请求数，因为浏览器对同一域名下的HTTP请求数有限制，减少请求可以加快资源加载速度。同时，对于小图片，嵌入Base64编码可以避免额外的文件请求开销。

插件使用

TerserPlugin
- 策略：Webpack默认使用TerserPlugin来压缩代码。在webpack.config.js中可以对其进行配置，例如：
```
module.exports = {
  optimization: {
    minimizer: [
      new TerserPlugin({
        parallel: true, // 开启多线程压缩
        terserOptions: {
          compress: {
            drop_console: true // 删除console.log语句
          }
        }
      })
    ]
  }
};
```
- 性能提升：压缩代码可以显著减少文件大小，加快文件传输速度。开启多线程压缩可以利用多核CPU的优势，加快压缩过程，提升构建速度。删除console.log语句可以进一步减小文件体积。
HtmlWebpackPlugin
- 策略：可以通过配置HtmlWebpackPlugin来自动生成HTML文件，并将打包后的JavaScript和CSS文件插入到HTML中。同时，可以设置minify选项来压缩HTML文件，例如：
```
const HtmlWebpackPlugin = require('html - webpack - plugin');
module.exports = {
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
      minify: {
        collapseWhitespace: true,
        removeComments: true,
        removeRedundantAttributes: true,
        useShortDoctype: true
      }
    })
  ]
};
```
- 性能提升：减少手动维护HTML和插入资源的工作量，同时压缩HTML文件可以减小文件大小，加快页面加载速度。
CleanWebpackPlugin
- 策略：在每次构建前，使用CleanWebpackPlugin清理输出目录，确保输出目录只包含最新的构建产物。在webpack.config.js中引入并使用：
```
const CleanWebpackPlugin = require('clean - webpack - plugin');
module.exports = {
  plugins: [
    new CleanWebpackPlugin()
  ]
};
```
- 性能提升：避免旧的构建文件残留，确保每次构建都是最新且干净的，减少不必要的文件体积，同时也有助于避免因旧文件干扰而导致的潜在问题。

星途面试题库

面试题：JavaScript性能优化之Webpack优化策略

知识考点

面试题答案

代码分割

加载器配置

插件使用