npm 包 print-sizes 使用教程

在前端开发中,我们经常需要对文件大小进行优化和管理。为了更好地诊断和调试我们的代码,我们需要使用一些工具来查看我们的文件占用了多大的空间。

其中,一款非常优秀的工具就是 print-sizes,它能够打印出我们的文件的大小以及 gzip 后的大小,帮助我们更好地进行优化。

安装

使用 npm 进行全局安装:

--- ------- -- -----------

使用方法

打开命令行界面,进入项目的目录,执行如下命令:

-----------

这个命令会自动查找你的项目中的所有文件,并且打印出以下信息:

  ---- --   --- - ---- ------
  ---- --   --- - ---- --------------
   --- -    -- - ---- ---------

其中,第一列是文件的原始大小,第二列是文件 gzip 后的大小,第三列是文件名。

开启 watch 模式

如果你想在每次更改代码时都自动重新计算文件大小,你可以使用 watch 模式。只需要在 print-sizes 命令后面加上 --watch 参数即可:

----------- -------

这个命令会一直在前台运行,每次检测到文件变化,就会重新计算文件大小并打印出来。

忽略文件

如果你想忽略某些文件的大小计算,比如一些测试代码或者临时文件,你可以使用 .print-sizes-ignore 文件来配置。在这个文件中,一行一个文件名或者 glob 表达式来指定被忽略的文件。

例如,你可以将以下内容保存为 .print-sizes-ignore 文件,然后运行 print-sizes 命令时就会忽略这些文件的大小计算。

---------
--------

总结

借助 print-sizes 工具,我们能够更好地了解我们的项目中各个文件的大小,从而有针对性地进行优化和管理。希望本篇文章能对你在前端开发中的工作有所帮助。

来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/5ef8589a403f2923b035b978


猜你喜欢

  • npm 包 p-try-each 使用教程

    在前端开发中,经常需要处理数组或者异步任务列表,并且需要在整体或部分异常时做出相应的处理,这时我们就需要一个工具来帮助我们处理类似的问题。p-try-each 是一个可以在 Promise 数组中遍历...

    4 年前
  • npm 包 ipfs-http-response 使用教程

    最近,随着区块链技术的不断发展,更多的开发者开始借助分布式存储来共享和存储数据。IPFS 是一个基于分布式技术的协议和网络,可以使互联网分散、安全和快速,逐渐成为开发者的首选。

    4 年前
  • npm包 it-buffer-stream 使用教程

    在前端开发中,有时需要对数据进行加工和处理,而数据往往是以流的形式传输。因此,我们需要使用一些npm包来帮助我们进行数据流的处理。it-buffer-stream就是其中一种流处理的npm包。

    4 年前
  • npm 包 ipfs-unixfs-exporter 使用教程

    前言 IPFS(Universal Protocol for Inter-planetary File System) 是一个去中心化的分布式网络,可以把整个互联网看作一个文件系统。

    4 年前
  • npm 包 ipld-in-memory 使用教程

    ipld-in-memory 是一个用于 IPFS 数据处理的 JavaScript 库,它提供了一种将 IPFS 中的数据转化为 JSON 对象的方式,方便开发者使用。

    4 年前
  • npm 包 ipld 使用教程

    前言 IPFS(InterPlanetary File System)是一个分布式文件系统,它是去中心化的,使用一个纯 P2P 协议来存储与访问文件,同时可以保证文件的安全性和持久性。

    4 年前
  • npm 包 ipld-bitcoin 使用教程

    npm 包 ipld-bitcoin 使用教程 Ipld-bitcoin 是一个使用 IPLD(InterPlanetary Linked Data)技术的 Bitcoin 数据模型。

    4 年前
  • npm 包 ipld-ethereum 使用教程

    在以太坊生态系统中,IPLD 是一种重要的技术,它是一种跨链数据路由协议,可以让不同的区块链平台之间共享数据。ipld-ethereum npm 包是实现 IPLD 协议的前端库,可以让开发者在以太坊...

    4 年前
  • npm 包 ipld-git 使用教程

    前言 随着区块链技术的发展,分布式的数据存储和管理变得愈加重要。在这个背景下,IPFS(InterPlanetary File System)和 IPLD(InterPlanetary Linked ...

    4 年前
  • npm 包 jsdoc4readme 使用教程

    在前端开发中,文档编写是非常重要的一项任务。为了提高文档编写效率和质量,我们可以使用一些工具来辅助文档编写。这里介绍一个 npm 包 jsdoc4readme,它可以将 jsdoc 注释生成为 Mar...

    4 年前
  • npm 包 zcash-block 使用教程

    简介 zcash-block 是一个 npm 包,用于解析、构建 Zcash 区块链的区块数据。Zcash 是一种基于零知识证明的加密货币,支持私密交易。zcash-block 可以帮助开发者快速地解...

    4 年前
  • npm 包 ipld-zcash 使用教程

    IPLD 是一个旨在为分布式应用程序提供内置跨协议和跨链互操作性的数据模型的项目。IPLD-ZCash 是 IPLD 的一个子项目,它为 ZCash 区块链数据提供了 IPLD 数据模型。

    4 年前
  • npm 包 eslint-plugin-bdd 使用教程

    在前端开发中,我们经常会使用到 eslint 工具来检测代码风格。而 eslint-plugin-bdd npm 包则可以帮助我们更好地进行 BDD(行为驱动开发)风格的代码编写。

    4 年前
  • npm 包 timestamp-nano 使用教程

    介绍 timestamp-nano 是一个 npm 包,用于生成高精度时间戳。相较于 JavaScript 内置的 Date 对象,它可以生成更加精准的时间戳,单位为纳秒级别。

    4 年前
  • npm 包 ipns 使用教程

    什么是 ipns ipns 全称是 InterPlanetary Name System,是 IPFS 的命名系统,它可以用来为 IPFS 内的内容分配唯一的、可变的名称。

    4 年前
  • npm包 it-multipart 使用教程

    简介 it-multipart 是一个 Node.js 的模块,封装了 HTTP 请求上传 multipart/form-data 数据的方法,支持上传文件、文本和二进制数据等。

    4 年前
  • npm 包 codem-isoboxer 使用教程

    在前端开发中,我们经常需要对不同的文本进行格式化、布局等处理。一个流行的解决方案是使用富文本编辑器,如Quill、TinyMCE等。但是,有时候我们需要更细粒度的文本处理能力,比如对特定的字符或单词进...

    4 年前
  • npm 包 tape-puppet 使用教程

    前言 在前端开发中,我们需要进行各种测试来确保我们的产品的质量。tape-puppet 是一个基于 tape 和 puppeteer 的 npm 包,它可以帮助我们进行端到端(E2E)测试。

    4 年前
  • npm 包 iterable-ndjson 使用教程

    前言 在前端开发中,我们经常需要处理 JSON 格式的数据。而如果数据过于复杂、过大,我们可能需要使用 newline-delimited JSON(ndjson)格式的数据。

    4 年前
  • npm 包 filesaver.js-npm 使用教程

    前言 在前端开发过程中,我们常常需要处理文件的下载、保存等操作,为了避免重复的劳动,我们可以使用一些已经成熟、稳定的工具来简化开发工作,filesaver.js-npm 就是其中一个不错的选择。

    4 年前

相关推荐

    暂无文章