npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

flipper-plugin-launchperformancetree

v1.0.5

Published

launchperformance-tree是一个Flipper插件,它使用树形结构展现Js模块的加载速度和依赖关系。

Downloads

11

Readme

flipper-plugin-launchperformance-tree

launchperformance-tree是一个Flipper插件,它使用树形结构展现Js模块的加载速度和依赖关系。

1. 主要功能

  • 查找加速速度缓慢的js模块,通过依次展开子树精确定位大型js模块的名称
    • 你可以点击 + 展开模块依赖书,并通过不同的颜色判断模块加载速度是否有问题

2. 建议选择大于5ms的过滤选项,以提高查找效率

3. 数据说明

3.1 时长

一般包括js文件载入内存、jsCore解释js代码、jsCore执行代码中的define方法得到模块的基础信息,运行require方法得到模块的导出对象。JS模块存在相互依赖关系,如果模块A依赖模块B,那么模块A的加载时长中包含了B的加载时长。

3.2 灰色模块

baseBundle中的模块,这些模块在线上环境会做预加载,所以不会占用首屏启动的时长,故不需要优化。

3.3 红色模块

加载时长超过20ms,表示很可能存在问题。但是项目入口文件的加载时长通常大于20ms,不需要过于担心。

3.4 蓝色模块

加载时长超过5ms

3.5 绿色模块

加载时长小于5ms