面试题：如何优化 Webpack 打包 Vue 应用的速度？

优化 Webpack 打包 Vue 应用的速度是提升开发效率和用户体验的重要环节。以下是一些常见的优化策略：

1. 使用 `cache` 缓存

Webpack 5 引入了持久化缓存机制，可以显著提升构建速度。

配置示例：

module.exports = {
  cache: {
    type: 'filesystem', // 使用文件系统缓存
  },
};

说明：

启用缓存后，Webpack 会将构建结果缓存到磁盘，下次构建时直接复用缓存。

2. 减少打包体积

通过减少打包体积，可以加快构建速度和加载速度。

方法 1：代码分割（Code Splitting）

使用动态导入（import()）将代码拆分为多个 chunk，按需加载。

示例：

const Foo = () => import('./Foo.vue');

说明：

将路由组件或大型组件拆分为异步加载的 chunk。

方法 2：Tree Shaking

移除未使用的代码。

配置示例：

module.exports = {
  optimization: {
    usedExports: true, // 启用 Tree Shaking
  },
};

说明：

确保代码是 ES Module 格式（使用 import/export）。
在 package.json 中设置 sideEffects: false。

方法 3：压缩代码

使用 TerserPlugin 压缩 JavaScript 代码。

配置示例：

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

module.exports = {
  optimization: {
    minimize: true,
    minimizer: [new TerserPlugin()],
  },
};

3. 优化 Loader 配置

通过优化 Loader 的配置，减少不必要的处理。

方法 1：缩小 Loader 的作用范围

使用 include 或 exclude 缩小 Loader 的处理范围。

示例：

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: path.resolve(__dirname, 'src'), // 只处理 src 目录下的文件
      },
    ],
  },
};

方法 2：缓存 Loader 结果

使用 cache-loader 缓存 Loader 的处理结果。

示例：

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          'cache-loader', // 缓存 Babel 编译结果
          'babel-loader',
        ],
      },
    ],
  },
};

4. 使用 DllPlugin 预编译第三方库

将不常变化的第三方库（如 Vue、Vuex、Vue Router）提前打包，减少构建时间。

配置示例：

创建 webpack.dll.config.js：

   const path = require('path');
   const webpack = require('webpack');

   module.exports = {
     entry: {
       vendor: ['vue', 'vuex', 'vue-router'],
     },
     output: {
       path: path.resolve(__dirname, 'dll'),
       filename: '[name].dll.js',
       library: '[name]_library',
     },
     plugins: [
       new webpack.DllPlugin({
         name: '[name]_library',
         path: path.resolve(__dirname, 'dll/[name]-manifest.json'),
       }),
     ],
   };

在主配置中引用：

   const webpack = require('webpack');
   const path = require('path');

   module.exports = {
     plugins: [
       new webpack.DllReferencePlugin({
         manifest: path.resolve(__dirname, 'dll/vendor-manifest.json'),
       }),
     ],
   };

说明：

提前打包第三方库，减少主构建过程的处理时间。

5. 使用 `thread-loader` 多线程打包

通过多线程加速 Loader 的处理。

配置示例：

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          'thread-loader', // 多线程处理
          'babel-loader',
        ],
      },
    ],
  },
};

说明：

适用于 CPU 密集型的 Loader（如 Babel、TypeScript）。

6. 使用 `HardSourceWebpackPlugin` 缓存模块

HardSourceWebpackPlugin 可以缓存模块的构建结果，显著提升二次构建速度。

配置示例：

const HardSourceWebpackPlugin = require('hard-source-webpack-plugin');

module.exports = {
  plugins: [new HardSourceWebpackPlugin()],
};

说明：

适用于 Webpack 4 及以下版本。

7. 优化 `resolve` 配置

通过优化 resolve 配置，减少模块解析的时间。

配置示例：

module.exports = {
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'), // 设置路径别名
    },
    extensions: ['.js', '.vue', '.json'], // 自动解析扩展名
    modules: [path.resolve(__dirname, 'src'), 'node_modules'], // 指定模块搜索目录
  },
};

说明：

减少模块解析的路径搜索范围。

8. 使用 `webpack-bundle-analyzer` 分析打包结果

通过分析打包结果，找出体积较大的模块并进行优化。

配置示例：

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  plugins: [new BundleAnalyzerPlugin()],
};

说明：

生成可视化的打包分析报告，帮助优化打包体积。

9. 使用 `externals` 排除第三方库

将某些第三方库通过 CDN 引入，减少打包体积。

配置示例：

module.exports = {
  externals: {
    vue: 'Vue',
    'vue-router': 'VueRouter',
    vuex: 'Vuex',
  },
};

说明：

在 HTML 中通过 <script> 标签引入 CDN 资源。

10. 使用 `splitChunks` 优化代码分割

通过 splitChunks 将公共代码提取到单独的 chunk 中。

配置示例：

module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all', // 提取所有类型的 chunk
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all',
        },
      },
    },
  },
};

说明：