前言
在现代前端开发中，我们通常会使用很多库和框架来增强我们开发的效率和代码的质量。随着项目的不断变大，我们有时会发现我们增加的依赖中一些库和框架的大小会占用过多的应用程序的资源。
其中一个方法，就是使用 webpack 的 bundle 分析工具，在分析的结果中查看每个包所占空间，来找出应用的瓶颈。
本文将介绍如何使用一个名为 size-plugin-store 的 npm 包来解决这个问题。
什么是 size-plugin-store
size-plugin-store 是一个能够帮助我们获取到 webpack 打包后的文件大小的插件， 并将包大小存储在文件中或者上传至一个可配置的 server 服务器。
安装
npm:
npm install size-plugin-store --save-dev
yarn:
yarn add size-plugin-store --dev
使用
首先，需要将插件添加到 webpack 配置文件中的插件数组中：
-- -------------------- ---- -------
----- - --------------- - - -----------------------------
-------------- - -
-----
-------- -
--- -----------------
------- ------------------
---
--
--这里我们配置了输出文件路径，这里设置为 size/result.txt，这会在项目根目录下创建一个 size 文件夹和 result.txt 文件。 当你构建你的项目后，你会在这个文件中获得每个 bundle 包的大小.
另外，我们可以在构建完成后将结果上传至指定的服务器。
例如，我们想要将构建后的大小结果上传到 http://yourdomain.com/api/result 这个地址上：
-- -------------------- ---- -------
----- - --------------- - - -----------------------------
-------------- - -
-----
-------- -
--- -----------------
------- ------------------
---------- -----------------------------------
---
--
--这里我们额外配置了 uploadApi 属性，即可将结果上传至指定的服务器。
结论
size-plugin-store 是一个轻量级的 webpack 插件，可以帮助我们轻松获取 webpack 输出结果的文件大小，并且它的使用非常方便。通过分析结果，可以帮助我们优化我们的应用程序和减少不必要的依赖。
示例代码
一个完整的 webpack 配置如下:
-- -------------------- ---- -------
----- ---- - ----------------
----- - --------------- - - -----------------------------
-------------- - -
----- -------------
------ -----------------
------- -
--------- ----------
----- ----------------------- --------
--
------------- -
------------ -
------- ------
--
--
-------- -
--- -----------------
------- ------------------
---------- -----------------------------------
---
--
--来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f050c85403f2923b035be8a