leetcode每日一题（20241203）

文章目录

• • webpack 中 chunkHash 和 contentHash 的区别
  • loader和plugin的区别？
  • webpack 处理 image 是用哪个 loader，限制 image 大小的是...；
  • 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，小于此值会转为 Base64
              name: '[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 或 resource
        parser: {
          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(),
]