webpack 题目 - 技术栈

文章目录

- [webpack 中 chunkHash 和 contentHash 的区别](#webpack 中 chunkHash 和 contentHash 的区别)
- loader和plugin的区别？
- [webpack 处理 image 是用哪个 loader，限制 image 大小的是...；](#webpack 处理 image 是用哪个 loader，限制 image 大小的是...；)
- [webpack 如何优化打包速度](#webpack 如何优化打包速度)

webpack 中 chunkHash 和 contentHash 的区别

主要从四方面来讲一下区别：1、hash的生成依据；2、影响范围；3、用途；4、限制。以及我们如何使用

chunkHash：

生成依据：基于每个 chunk 的内容生成哈希值。
影响范围：同一个 chunk 内的所有模块发生变化时，chunkhash 会重新生成。
用途：适合用来区分不同的打包文件，比如入口文件（main.js）和依赖模块文件（vendor.js）。
限制：如果 chunk 中的非代码部分（比如引入的样式或其他模块）变化了，chunkhash 也会变化，不够精细。

javascript 复制代码

output: {
  filename: '[name].[chunkhash].js',
},

场景问题：

假设你修改了项目中的 CSS 文件，但由于 CSS 和 JS 打包在同一个 chunk 中，chunkhash 会因为 CSS 的变化而导致 JS 文件的哈希值也发生变化，这可能会导致缓存失效。

contenthash

生成依据：基于具体文件内容生成哈希值。
影响范围：仅在内容本身发生变化时，contenthash 才会重新生成。
用途：适用于精细化缓存管理，特别是 CSS 和 JS 文件分离的场景。
优势：修改 CSS 不会影响 JS 文件的哈希值，反之亦然。

示例：

javascript 复制代码

output: {
  filename: '[name].[contenthash].js',
},

场景优点：

假设你对 CSS 文件进行了修改，只有 CSS 文件的哈希值会更新，而 JS 文件的哈希值不会变动，这样用户浏览器可以继续使用缓存的 JS 文件。

如何选择：

开发模式：一般直接使用hash（全局简单哈希值，生成快）
生产模式：
- 使用chunkhash 来管理js文件缓存
- 使用contenthash来管理css和其他静态文件的缓存
- 借助 MiniCssExtractPlugin将css抽离，并使用contenthash防止js和css哈希混淆

Webpack 配置参考：

javascript 复制代码

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  output: {
    filename: '[name].[chunkhash].js', // JS 使用 chunkhash
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].[contenthash].css', // CSS 使用 contenthash
    }),
  ],
};

loader和plugin的区别？

webpack 处理 image 是用哪个 loader，限制 image 大小的是...；

在 Webpack 中，处理图片（image）通常使用 url-loader 或 file-loader，结合 asset 模式（Webpack 5 引入的新特性）更为常见。

图片处理 Loader

url-loader
- 用于将图片转为 Base64 编码的 Data URL 形式，嵌入到 JavaScript 文件中。
- 优点：小图片可内嵌，减少 HTTP 请求。
- 限制：较大的图片内嵌会增加打包文件体积。
file-loader
- 用于将图片作为文件输出，并返回对应的路径。
- 优点：适合较大的图片文件，不会嵌入到 JS 中。
- 限制：需要额外的 HTTP 请求。

Webpack 5 的 asset 模式

取代了传统的 url-loader 和 file-loader，统一处理静态资源。
提供两种自动选择方式：
- asset/resource：类似 file-loader，将文件输出为单独的文件。
- asset/inline：类似 url-loader，将文件内嵌为 Base64。
- asset：根据文件大小自动选择 resource 或 inline（默认阈值 8 KB）。
- asset/source：将文件内容作为字符串导入。

限制图片大小的配置
url-loader 示例
通过 limit 参数限制图片大小，超出限制的会作为文件处理，否则转为 Base64。

javascript 复制代码

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|jpeg|gif|svg)$/i, // 处理图片文件
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192, // 限制大小为 8 KB，小于此值会转为 Base64
              name: '[name].[hash:8].[ext]', // 输出文件名
              outputPath: 'images', // 输出到 images 文件夹
            },
          },
        ],
      },
    ],
  },
};

Webpack 5 的 asset 模式

设置 asset 模式时，限制图片大小的方式是通过 parser.dataUrlCondition.maxSize 指定阈值（单位字节，默认 8 KB）。

javascript 复制代码

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|jpeg|gif|svg)$/i, // 处理图片
        type: 'asset', // 根据大小自动选择 inline 或 resource
        parser: {
          dataUrlCondition: {
            maxSize: 8192, // 超过 8 KB 则单独打包成文件
          },
        },
        generator: {
          filename: 'images/[name].[hash:8][ext]', // 输出路径和文件名
        },
      },
    ],
  },
};

推荐使用
在 Webpack 5 中，建议直接使用 asset 模式，这样无需额外安装 url-loader 或 file-loader，而且配置更加简单灵活。
如果你有特殊的需求（比如区分非常小或非常大的文件处理方式），可以手动指定 type 为 asset/inline 或 asset/resource。

webpack 如何优化打包速度

减少文件搜索范围

优化 resolve 配置：
限制模块解析路径，减少解析时间。

javascript 复制代码

resolve: {
  extensions: ['.js', '.jsx', '.json'], // 文件后缀范围
  alias: { '@': path.resolve(__dirname, 'src') }, // 路径别名
  modules: [path.resolve('node_modules')], // 仅在指定目录搜索模块
}

指定 include 和 exclude：
在 loader 中明确指定需要处理的范围。

javascript 复制代码

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

缓存机制
开启持久化缓存：
Webpack 5 原生支持持久化缓存，能显著提升构建速度。

cache: {
type: 'filesystem', // 使用文件缓存
},

Babel-loader 缓存：

配置 cacheDirectory 将 Babel 编译结果缓存到文件系统。

module: {
  rules: [
    {
      test: /\.js$/,
      loader: 'babel-loader',
      options: {
        cacheDirectory: true,
      },
    },
  ],
},

多进程/多实例打包

thread-loader：
开启多线程处理，适合较重的 loader。

javaScript 复制代码

module: {
  rules: [
    {
      test: /\.js$/,
      use: ['thread-loader', 'babel-loader'],
    },
  ],
},

压缩优化
TerserPlugin：
配置并行压缩，默认在生产模式下启用。

javascript 复制代码

optimization: {
  minimize: true,
  minimizer: [
    new TerserPlugin({
      parallel: true, // 多线程压缩
    }),
  ],
},

减少文件体积

按需加载：
通过动态 import 实现代码分割，减少初始加载文件的体积。
Tree Shaking：
移除无用代码，确保使用 ES Module。

javascript 复制代码

复制代码
optimization: {
  usedExports: true, // 标记未使用的导出
},

开发模式下的优化
使用 source-map 的更快模式：
如 eval-source-map 或 cheap-module-source-map。

javascript 复制代码

devtool: 'cheap-module-source-map',

使用 webpack-dev-server 提升本地开发效率：

javascript 复制代码

devServer: {
  hot: true, // 热模块替换
},

减少构建体积
使用外部依赖 (externals)：
将第三方库从打包中排除，通过 CDN 引入。

javascript 复制代码

externals: {
  react: 'React',
  'react-dom': 'ReactDOM',
},

减少依赖包：
删除无用的依赖。
使用体积更小的包（如 lodash-es 替代 lodash）。

分析和监控
使用打包分析工具：
如 webpack-bundle-analyzer，找到体积较大的模块优化。

javascript 复制代码

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
plugins: [
  new BundleAnalyzerPlugin(),
]