使用Import-Cost VSCode插件控制导入包大小


我们的行业一直在讨论现代 Web 应用程序和网站的膨胀问题,由于这是一个热门话题,许多人已经尝试使用很棒的工具来解决它,例如webpack-bundle-analyzercost-of-modules、命令行 webpack 警告以及代码拆分和延迟加载等技术。虽然这些都是很棒的工具,但如果你没有足够的意识,它们很容易被忽视。
Import-Cost 是一个Visual Studio Code 扩展,它会在您导入它的那一刻(或之后的几分钟)向您显示导入的第 3 方库的大小。此扩展不打算用作捆绑分析工具 - 有更好的工具,此扩展将帮助您找到明显的痛点并防止向您的客户发送大量捆绑包。
 
工作原理
Import-Cost 听取活动编辑器窗口中文本的变化。每当它检测到一个变化(当然是被宣布的),它将使用Typescript和Babylon AST分析器分析当前窗口的代码,并编制一个有效的导入或需要的候选列表。