插件窝 干货文章 包裹作为捆绑商的好处

包裹作为捆绑商的好处

哈希 文件 li 代码 617    来源:    2024-10-23

包裹的好处

  • 开发工具
  • HMR - 热模块更换 --->> 如何 - 通过使用 C++ 编写的文件监视算法来跟踪您的代码并尽快 您尝试保存文件,它会使用新代码刷新服务器
  • 本地服务器http://localhost:1234
  • 缓存内存管理。 ---> 速度很快
  • 图像优化
  • 压缩文件
  • 捆绑
  • 内容哈希
  • 差异捆绑babel
  • 也可以在 ssl https 上运行
  • tree shake ---> 删除多余的未使用的代码或函数

    内容哈希: -Parcel 中的内容哈希涉及根据每个文件的内容生成唯一的 SHA-256 哈希。在部署应用程序之前,Parcel 会将这些哈希值与其缓存目录 (.parcel-cache) 中存储的哈希值进行比较。如果文件的哈希值与其缓存版本匹配,Parcel 将使用缓存文件,从而避免不必要的重建并优化部署速度。当文件的内容发生更改时,其哈希值会更新,从而提示 Parcel 仅重建已修改的文件并在服务器上更新它们。这种方法不仅可以通过重用未更改的文件来提高构建性能,还可以确保浏览器通过基于文件哈希的唯一文件名可靠地接收更新的内容,从而防止部署期间出现缓存问题。

    hmr 详细信息 - 所以基本上当文件被修改时,即它的哈希现在与旧版本不同,修改后的文件仅在浏览器中更新,而哈希与旧哈希相同的所有其他文件使用 .parcel-cache文件,可以减少时间并避免从头开始重建整个应用程序,每次程序员保存文件时都会触发这一切&&浏览器正在运行该应用程序(实时)

    差异化捆绑:由于 babel 用于在包裹中进行捆绑——它执行多项任务

    • babel 将 es6+ js 代码转换为你的应用程序在旧版浏览器中运行所需的 es5 代码
    • 它将 React 的 jsx 代码转换为 js 代码(jsx 转换为 js 对象(ast)),因为我们都知道浏览器的 v8 引擎无法理解 jsx 代码
    • 它还可以转换 JavaScript 中的 typescript,因为 TS 是 js 的超集,为 js 添加静态类型