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 🙏

© 2026 – Pkg Stats / Ryan Hefner

webpack-templete-env

v2.0.2

Published

webpack config templete

Downloads

29

Readme

Webpack-preset

1. 提升开发体验

  • 使用__Source Map__ 让开发或上线时代码报错能有更加准确的错误提示。
  • 使用Babel翻译js新语法,简化代码。
  • 使用Eslint进行语法检查,使代码更规范。

2. 提升webpack打包构建速度

  • 使用HotModuleRepalcement让打包时只重新编译打包更新变化的代码,不变的代码使用缓存,从而使更新速度更快。
  • 使用OneOf让资源文件一旦被某个loader处理就跳出遍历。
  • 使用Include/Exclude排除不需要处理的文件。
  • 使用Cache对eslint和babel处理结果进行缓存,让二次打包速度更快。
  • 使用Thead多进程处理eslint和babel任务。

3. 减少代码体积

  • 使用TreeShaking剔除冗余代码。
  • 使用@babel/plugin-transform-runtime插件对babel进行处理,抽取辅助代码。
  • 使用Image Minimizer 对项目中图片进行压缩。

4. 优化代码运行性能

  • 使用Code Split对代码进行分割,减小单个js体积,并行加载js速度更快,并使用import()动态引入实现按需加载。
  • 使用Preload/Prefetch对代码进行预加载。
  • 使用Network Cache对输出文件进行更好命名,方便缓存。
  • 使用Core-Js对js进行兼容性处理,提高兼容性。
  • 使用PWA让代码可以离线访问。

1. 图片压缩库

"image-minimizer-webpack-plugin": "^3.6.1", "imagemin": "^8.0.1", "imagemin-gifsicle": "^7.0.0", "imagemin-jpegtran": "^7.0.0", "imagemin-optipng": "^8.0.0", "imagemin-svgo": "^10.0.1",