简介
npm是前端开发中非常常用的一个工具，它允许我们轻松地安装和管理各种 JavaScript 包和工具。在使用npm的过程中，我们会经常遇到各种问题，其中一个非常常见的问题就是包体积过大，特别是在项目的初期阶段，我们通常会引入大量的依赖包，这些依赖包的大小可能会严重影响项目的加载速度。为了解决这个问题，我们可以使用npm包 keep-it-small。
keep-it-small是一个小型 npm 包，它可以帮助我们检查我们项目中使用的所有 npm 包的体积大小，并提供一些使用场景中如何减小体积的建议。
在本文中，我们将介绍如何安装和使用keep-it-small，以及如何通过该工具来优化我们的项目。
安装
通过 npm 结合如下命令安装 keep-it-small:
npm install -g keep-it-small
安装成功后，我们可以在终端中使用keep-it-small命令来访问该工具。
使用
使用 keep-it-small 非常方便，我们只需要在命令行中输入以下代码来获取关于我们在项目中使用的各个 npm 包的体积信息：
keep-it-small
执行该命令后，keep-it-small 会继续搜集与当前项目相关的所有依赖包，并将这些包的相关信息以表格的形式呈现出来。
我们可以通过设置不同的选项来进一步控制 keep-it-small 的行为。例如，我们可以通过- n选项来只显示文件大小最大的前n个包：
keep-it-small -n 10
我们也可以通过-k 选项来只显示策略中标记为关注的包：
keep-it-small -k
关注的包在 keep-it-small 中被指定为有限关注的包，这些包的相关信息将被显式显示。我们可以通过创建一个 .keep-small.json 文件来定义关注的包。
除此之外，我们还可以使用-u(更新最新版本)和-v（输出高级调试信息）选项，来进一步增加 keep-it-small 的功能和灵活性。
优化
通过 keep-it-small 我们可以很容易地获取有关我们项目中使用 npm 包的详细信息。然而，这些信息仅仅是我们开始优化我们的项目的第一步，接下来我们需要采取进一步的行动。
在这里，我们提供一些有用的技巧，以帮助你进一步优化你的项目：
1. 删除无用的依赖项
我们经常会在项目中引入不必要的依赖项。这些依赖项可能实际上我们的项目用不到，但我们还是把它们安装进了项目中。在我们的项目中尽量不要引入这些无用的依赖项，这不仅可以减小项目的体积，还可以减少我们项目安装和构建的时间。
2. 使用CDN
使用CDN（内容分发网络）来引入各种资源文件是一个非常好的选择。CDN可以提供快速的加载速度，从而加速我们的网站的访问速度。同时，CDN还可以提供更可靠的服务，例如缓存和网络容错等。
3. 压缩和优化代码
使用压缩和优化代码是一个在前端开发中非常常见的技巧。通过压缩和优化我们的代码，我们可以减少代码的体积，并提高代码的质量。对于 JavaScript 代码，我们经常使用工具像 UglifyJS 进行压缩和优化。
4. 按需加载
按需加载可以确保我们的网站只加载需要的内容。这可以大大减少我们网站的加载时间，并提高我们网站的性能。例如，我们可以在需要某个依赖项时才引入它。
5. 减少依赖项
更少的依赖项可以减少我们项目的体积和复杂性。在我们的项目中仅包含必要的依赖项，可以帮助我们构建更简洁、可靠的代码库。
示例代码
下面是通过keep-it-small获得的关于项目中npm包的部分信息：
-- -------------------- ---- ------- --------------------------------------------------------- - ---- - ---- - ---- ---- - --------------------------------------------------------- - ----- - ------- -- - ------ -- - - ------- - ------ -- - ----- -- - - ------ - ----- -- - ----- -- - - ------ - ----- -- - ----- -- - - ------ - ----- -- - ----- -- - - ----- - ------ -- - ----- -- - - ----------- - ------ -- - ------ -- - - ------------------------------- - ----- -- - ----- -- - - -------- - ----- -- - ----- -- - - ----------- - ------ -- - ----- -- - ---------------------------------------------------------
示例代码使用 keep-it-small 从项目依赖库中获取各个 npm 包的体积信息。通过对这些信息进行分析，我们可以深入了解项目中所有依赖项的大小状况，从而继续优化我们的项目。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066efd4c49986ca68d8a83