#yyds干货盘点#这13个webpack插件,让你的项目起飞
前言
相信大家在使用webpack的时候,总是不知道如何下手,对于不同的场景,总是找不到合适的webpack的插件,本系列按照github的star数量排序,整理了很多插件,建议收藏,以后用得到! 本文先介绍部分高star插件,后面会持续更新。
top1:Webpack Bundle Analyzer ⭐14.4K
使用交互式可缩放树图可视化 webpack 输出文件的大小。
top2:HTML Webpack Plugin ⭐11.3k
简化创建 HTML 文件以服务于您的包的插件
top3: prerender-spa-plugin ⭐9.8k
这个插件的目标是提供一个简单的预渲染解决方案,该解决方案易于扩展并可用于任何站点或使用 webpack 构建的单页应用程序。
1 Purgecss ⭐ 6,436
PugeCSS 是一个删除未使用的 CSS 的工具。它可以是您开发工作流程的一部分。 当你在建一个网站时,你可能会决定使用一个 CSS 框架,比如 TailwindCSS、Bootstrap、MaterializeCSS、Foundation 等等……但是你只会使用一小部分框架,并且会包含很多未使用的 CSS 样式. 这就是 PurgeCSS 发挥作用的地方。PurgeCSS 分析您的内容和 CSS 文件。然后它将文件中使用的选择器与内容文件中的选择器相匹配。它从您的 CSS 中删除未使用的选择器,从而生成更小的 CSS 文件。
2 Offline Plugin ⭐ 4,427
该插件旨在为webpack项目提供离线体验。它使用ServiceWorker和AppCache作为引擎盖下的后备。只需将此插件包含在您webpack.config的 .cpp 文件中,并在您的客户端脚本中包含随附的运行时,您的项目将通过缓存所有(或部分)webpack 输出资产来准备离线。
3. Mini Css Extract Plugin ⭐ 4,331
这个插件将 CSS 提取到单独的文件中。它为每个包含 CSS 的 JS 文件创建一个 CSS 文件。它支持按需加载 CSS 和 SourceMaps
4 Extract Text Webpack Plugin ⭐ 4,076
从一个或多个包中提取文本到一个单独的文件中。
5 Critters ⭐ 2,754
一个 Webpack 插件,用于内联关键 CSS 并延迟加载其余 CSS。
6 Copy Webpack Plugin ⭐ 2,654
将已存在的单个文件或整个目录复制到构建目录。
7 Hard Source Webpack Plugin ⭐ 2,589
HardSourceWebpackPlugin是 webpack 的插件,为模块提供中间缓存步骤。
8 React Refresh Webpack Plugin ⭐ 2,287
用于为 React 组件启用“快速刷新”(也称为热重载)
9 Preload Webpack Plugin ⭐ 2,174
用于使用. 这有助于延迟加载。
10 Page Skeleton Webpack Plugin ⭐ 2,153
地址Page Skeleton 是一款 webpack 插件,该插件的目的是根据你项目中不同的路由页面生成相应的骨架屏页面,并将骨架屏页面通过 webpack 打包到对应的静态路由页面中。
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhiajfeh
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
微信运动停用后别人还能看到步数吗
PHP中文网 07-22