前端面试题 - 84. webpack打包速度太慢怎么办？升级Webpack版本：多线程/多实例构建：按需打包：充

升级Webpack版本：
多线程/多实例构建：
按需打包：
充分利用缓存：
使用DLL：
配置resolve.modules配置项：
使用Tree Shaking：
压缩代码：

1. 升级Webpack版本：

升级Webpack版本是提高打包速度和性能的一个简单有效的方式。新版Webpack往往会修复一些性能问题并进行一些优化，通过升级Webpack版本，可以使得打包速度和代码质量得到改善。

使用这种方法比较简单，只需要在项目中更新Webpack相关的依赖，然后重新运行打包命令即可。但需要注意的是，新版Webpack可能会有一些不兼容的变化，需要注意更新文档和升级过程中的问题。

2. 多线程/多实例构建：

多线程/多实例构建是通过开启多个子进程来处理Webpack的打包工作，以充分利用CPU资源并减少打包时间的方式。具体而言，可以使用webpack-parallel-uglify-plugin插件来开启多线程压缩JS文件。

该插件会根据配置项自动分配任务给多个子进程，同时保证任务的有序执行和结果的合并。通过该插件，可以显著地缩短打包时间和提高构建效率。

使用该插件需要先安装依赖包：npm install -D webpack-parallel-uglify-plugin，然后在Webpack配置文件中引入并进行相应的配置。

3. 按需打包：

按需打包是指只打包需要的模块，从而有效地减少打包时间。通过Webpack的配置项Exclude和Include来排除或包含不需要或需要打包的模块，可以进一步优化打包效率。

具体而言，可以在webpack.config.js中使用exclude或include来配置相应的路径或文件，告诉Webpack哪些目录或文件不需要被打包，这样就可以减少不必要的编译和解析工作。

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

4. 充分利用缓存：

充分利用缓存是指将中间结果缓存到磁盘上，下次打包时直接使用缓存结果，避免重复编译和解析，从而提升二次构建速度。可以使用HardSourceWebpackPlugin插件来实现缓存。

该插件会在第一次构建时将Webpack构建结果缓存到磁盘上，下次构建时直接使用缓存结果，从而大幅度提升构建速度。使用该插件需要先安装依赖包：npm install -D hard-source-webpack-plugin，然后在Webpack配置文件中引入并进行相应的配置。

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

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

5. 使用DLL：

使用动态链接库（DLL）是一种常用的打包优化方式。DLL将第三方依赖库等稳定的模块单独打包成DLL文件，不参与每次的构建，可以提高打包速度。具体而言，可以在Webpack配置文件中配置DllPlugin和DllReferencePlugin来实现该功能。

const path = require('path');
const webpack = require('webpack');
const dependencies = require('./package.json').dependencies;

module.exports = {
  mode: 'production',
  entry: {
    vendor: Object.keys(dependencies),
  },
  output: {
    path: path.join(__dirname, 'public', 'dll'),
    filename: '[name].[chunkhash].dll.js',
    libraryName: '[name] *[chunkhash]', 
  }, 
  plugins: [ 
      new webpack.DllPlugin({ 
          path: path.join(__dirname, 'public', 'dll', '[name]-manifest.json'), 
          name: '[name]* [chunkhash]', }), 
  ], 
}

然后，在Webpack配置文件中引入DllReferencePlugin插件，并将DLL文件和manifest文件的路径添加到配置中。

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

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

6. 配置resolve.modules配置项：

通过指定Webpack查找模块的路径，可以缩短Webpack查找模块的时间，从而提高打包速度。可以使用resolve.modules配置项来指定查找模块的路径。

具体而言，可以在Webpack配置文件中添加如下代码：

module.exports = {
  // ...
  resolve: {
    modules: ['node_modules', 'src'],
  },
  // ...
};

这样就会告诉Webpack，先在node_modules目录下查找模块，如果没有再在src目录下查找模块，从而缩短查找模块的时间，提高打包速度。

7. 使用Tree Shaking：

通过Tree Shaking技术去除无用代码，可以减少打包体积和提高打包速度。可以通过在Webpack配置文件中开启optimization.minimize选项来开启Tree Shaking功能，同时需要确保使用ES6的模块化语法。

module.exports = {
  // ...
  optimization: {
    minimize: true,
  },
  // ...
};

8. 压缩代码：

压缩代码可以有效地减小打包体积，并提高构建速度。可以使用UglifyJsPlugin或TerserWebpackPlugin等插件来压缩JS代码。

具体而言，可以在Webpack配置文件中添加如下代码：

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

module.exports = {
  // ...
  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        extractComments: false, // 关闭抽取注释功能
        terserOptions: {
          compress: {
            drop_console: true, // 删除console()
          },
        },
      }),
    ],
  },
  // ...
};

这样就可以开启JS代码压缩和删除console()的功能，从而进一步优化打包效果。

综上所述，以上是常见的优化Webpack打包速度的方式，需要根据实际情况来选择合适的优化方式，以提升Webpack的性能和打包速度。