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 🙏

© 2022 – Pkg Stats / Ryan Hefner

babel-plugin-make-lazy

v0.0.4

Published

Allows for Universal Rendering and Lazy Loading by appending bundle-loader?lazy! just when you need it.

Downloads

6

Readme

babel-plugin-make-lazy

Allows for Universal Rendering and Lazy Loading by appending bundle-loader?lazy! just when you need it.

Why?

If you want both server side (universal) rendering and lazy loading, life can be tricky. Node + Babel generally don't know how to process things like bundle-loader?lazy!. This may cause you to run webpack server side in some interesting way or it may cause you to make a decision between lazy loading or server side rendering. There are likely a variety of other methods, but combine this all with the need to get routing to work correctly and you're left with very few options.... well, until now!

How?

In our project fervor we wanted to take advantage of both lazy loading and server rendering. For us, we ended up storing a map from routes to components (example) for our apps. As a result of this predictability we are able to take all imports in that file and compile them differently for the server side than on the client side. In other words, our client side babel config (that is used as a loader in webpack) has an extra plugin (this one) and our server side code doesn't need to care at all.

Configuration

This is pretty straightforward. Install this package as usual

yarn add babel-plugin-make-lazy
# or  
npm install babel-plugin-make-lazy

Next add the lazy plugin

let config = {
    presets: [
      ['env'],
    ],
    plugins: [
      [
        'make-lazy',
        {
          // paths is used to specify which files should have their imports laze'ified
          paths: ['src\/urls\.js'],
          // moduleExceptions is used to prevent adding `bundle-loader?lazy!` to some of your imports
          // here I enforce that laziness only happens for relative imports
          moduleExceptions: ['^[^(./|../)]'],
        },
      ],
    ],
  };

Note - both paths and moduleExceptions are an array of strings that represent regular expressions.