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

service-worker-precache-generator

v1.0.0

Published

一个webpack插件用来自动生成service worker脚本,该脚本可以`预缓存`webpack`打包出来的静态文件`和 `publicDir目录下的静态文件`,并且`支持cdn`。 # 参考 sw-precache-custom是基于sw-precache v5.2.1 sw-precache-webpack-plugin-custom基于sw-precache-webpack-plugin v0.11.5

Downloads

1

Readme

作用

一个webpack插件用来自动生成service worker脚本,该脚本可以预缓存webpack打包出来的静态文件publicDir目录下的静态文件,并且支持cdn

参考

sw-precache-custom是基于sw-precache v5.2.1 sw-precache-webpack-plugin-custom基于sw-precache-webpack-plugin v0.11.5

原组件缺陷

不能处理非webpack输出的静态文件

只能获取webpack打包出来的asset,不能处理publicDir目录下的静态文件,比如:favicon.icon,manifet文件。

不支持cdn

在同一目录下只能对应一个publicPath,因此不支持CDN。比如我PUBLIC__PATH设置成http://cdn.example.com,打包出来下面文件,那么转换如下,这样index.html就访问不到了。

index.html          ->http://cdn.example.com/index.html
bundle.12345678.js  ->http://cdn.example.com/bundle.12345678.js

我的源代码修改

针对sw-precache-webpack-plugin-custom

  1. option传入publicDir参数作为静态目录文件
  2. 读取静态目录文件,并把这些文件和打包出来的文件合并传入sw-precache
  3. 生成一个静态目录文件的映射对象,映射的public_path是'/',因为这些类似于index.html,favicon.icon不走cdn。

代码主要修改在于增加了hackConfig函数和调用。

针对sw-precache

  1. 额外增加选项staticFileGlobsMap,当处理传入的静态文件时候,如果有映射的,就走映射,不进行文件名到public_path的替换,为了支持cdn。