npm 包 parcel-plugin-bundle-visualiser 使用教程-JavaScript中文网-JavaScript教程资源分享门户

背景

在构建前端项目时，优化项目体积是非常重要的一部分。随着项目变得越来越复杂，前端页面的 JS、CSS、图片等资源文件数量和大小也会越来越大。为了更好地管理和优化这些资源的使用，需要了解如何查看它们的使用情况。

简介

parcel-plugin-bundle-visualiser 是一个方便的工具，它可以帮助开发者可视化查看打包后的代码模块，从而更好地管理和优化前端资源使用。

使用 parcel-plugin-bundle-visualiser 插件，可以通过生成器生成一个 html 文件，该文件显示了项目中所有依赖项及其大小，因此可以帮助您识别哪些模块最耗费资源。

安装

在使用 parcel-plugin-bundle-visualiser 之前，您需要先安装 parcel；如果您还未安装 parcel，请使用 npm 进行安装：

npm install -g parcel-bundler

安装 parcel-plugin-bundle-visualiser：

npm install parcel-plugin-bundle-visualiser --save-dev

使用

在安装 parcel-plugin-bundle-visualiser 后，您可以在项目中使用它。

添加插件：

// .parcelrc
{
    "extends": "@parcel/config-default",
    "plugins": [
        "@parcel/plugin-typescript",
        "parcel-plugin-bundle-visualiser"
    ]
}

我们接下来用一个简单的实例演示如何使用。

创建一个 index.html 文件，并在该文件中引入 app.js 文件。

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

创建一个 app.js 文件，并在该文件中引入 lodash 包。

// app.js
import _ from 'lodash';

console.log(_.join(['Hello', 'world'], ' '));

运行打包命令：

parcel build index.html

在打包完成后，parcel-plugin-bundle-visualiser 会自动生成一个 html 文件 dist/stats.html 。在该文件中，您可以查看 lodash 包的大小以及其他依赖包的大小，从而更好地管理和优化项目资源。

总结

parcel-plugin-bundle-visualiser 是一个非常方便的工具，可以帮助您更好地管理和优化前端资源使用。它能够让您可视化查看打包后的代码模块，从而更好地识别哪些模块最耗费资源。本文中，我们介绍了如何安装和使用 parcel-plugin-bundle-visualiser，并使用一个简单的实例演示了如何运用该插件。希望这篇文章对您有所帮助！

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/5f2540a73b0ab45f74a8b972