CODE大全
版权声明:本文为博主原创文章,未经博主允许不得转载。

VSCode的webpack与babili-webpack-plugin扩展

发布时间:『 2017-08-09 18:00』  博客类别:系统运维  阅读(175) 评论(0)

最近看到一个VS CODE的扩展,很高效,因此在这里总结一下。

VS Code 有一个插件,可以显示每个加载的 npm 模块的大小。从而让你有个印象,运行一次脚本要加载多少东西!

此扩展将在编辑器中内联显示导入的包的大小。

该扩展使用webpack与babili-webpack-plugin来检测导入的大小。

VS Code 扩展

特征

目前支持:

  • 默认导入: import Func from 'utils';

  • 整个内容导入: import * as Utils from 'utils';

  • 选择性导入: import {Func} from 'utils';

  • 选择性导入别名: import {orig as alias} from 'utils';

  • 子模块导入: import Func from 'utils/Func';

  • 要求: const Func = require('utils').Func;

  • 支持Javascript和Typescript

组件配置

以下属性可配置:

// Upper size limit, in KB, that will count a package as a small package
"importCost.smallPackageSize": 50,

// Upper size limit, in KB, that will count a package as a medium package
"importCost.mediumPackageSize": 100,

// Decoration color for small packages
"importCost.smallPackageColor": "#7cc36e",

// Decoration color for medium packages
"importCost.mediumPackageColor": "#7cc36e",

// Decoration color for large packages
"importCost.largePackageColor": "#d44e40",

// File extensions to be parsed by the Typescript parser
"importCost.typescriptExtensions": [
"\\.tsx?$"
],

// File extensions to be parsed by the Javascript parser
"importCost.javascriptExtensions": [
"\\.jsx?$"
]

如果你是使用visual studio作为开发工具的话,建议你赶紧将此插件扩展起来。


——— 全文完 ———
如有版权问题,请联系532009913@qq.com。
关键字:   webpack     babili-webpack-plugin     visual     studio  
评论信息
暂无评论
发表评论
验证码: 
Powered by CODE大全 | 鄂ICP备14009759号-2 | 网站留言 Copyright © 2014-2016 CODE大全 版权所有