webpack 题目

webpack 中 chunkHash 和 contentHash 的区别

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

1. chunkHash：

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

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

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

2. contenthash

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

示例：

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

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

如何选择：

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

Webpack 配置参考：

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 引入的新特性）更为常见。

1. 图片处理 Loader

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

2. Webpack 5 的 asset 模式

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

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

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

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

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

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

webpack 如何优化打包速度

1. 减少文件搜索范围

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

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

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

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

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

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

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

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

3. 多进程/多实例打包

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

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

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

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

5. 减少文件体积

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

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

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

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

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

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

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

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

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

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

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