question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Document, optimize code size for client-side use?

See original GitHub issue

A frequent PITA with utility libraries like this is bad behavior when trying to optimize code size in webpack, et al. I’m no expert at this, so I can’t make specific recommendations. But folks need to know whether the documented import style

import { map } from 'itiriri';

sucks in a lot of irrelevant code in production, and if so, how they should avoid that. If it works great as documented, you should say that, too, so folks like me don’t pester you.

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:5 (2 by maintainers)

github_iconTop GitHub Comments

1reaction
dimadeveatiicommented, Feb 7, 2019

Indeed, currently you will reference entire package, it is not possible to use only map without loading the code for all other methods.
However:

  1. Do you really mind the size? I think gzip-ed it will be only 2-3KB for the entire power of advanced manipulation with iterables in JavaScript.
  2. if you need only one method like map, it’s so simple that I’d even not search for it but directly implement it:
// source is an Iterable
Array.from(source).map(...)

The advantage of itiriri, is that it’s interface allows you to chain methods. And this is one of the reasons we have to import all the methods.
If we had to optimize it and allow only specific methods to import, then instead of writing:

import { query } from 'itiriri';

// ...
query(source).filter(...).map(...).sort(...).slice(...)

you would have to write:

import { filter, map, sort, slice } from 'itiriri';

// ...
slice(sort(map(filter(source, ...), ...), ...), ...);

Basically this is how it is handled in itiriri under the hoods. However, we will appreciate and take into account any suggestion on how we can optimize this for client-side usage.

0reactions
dogokucommented, May 21, 2019

Sorry for necro-ing, but I wanted to add my 2 cents, in regards to this:

slice(sort(map(filter(source, …), …), …), …);

You could implement a transducer function, e.g pipeline, that takes any number of operators. (In Ramda this is called compose)

query(source).pipeline(
  filter(...),
  map(...),
  sort(...),
  slice(...)
}

This way you avoid function nest hell and you allow uses to import the operators they need.

P.s: Here’s an article of someone doing something similar with RxJS + Typescript Generics, to ensure code completion stays intact: https://dev.to/rasmusvhansen/rxjs-transducer---harness-the-power-of-rxjs-operators-1ai8

Read more comments on GitHub >

github_iconTop Results From Across the Web

Best Techniques for Client-Side Optimization | by Anh T. Dang
It is good to reduce the size of an image without compromising the quality to a large extent by using various image compression...
Read more >
How to Optimize JavaScript Delivery to Speed Up Your Site
Unoptimized JavaScript can slow down your site. Learn the best practices to deliver your JavaScript and speed up your website.
Read more >
Reduce file size client side before uploading to server
As far as I think,if you need to compress images,the image will be resize to smaller size or reduce the quality of the...
Read more >
Server Rendering in JavaScript: Optimizing for Size
However, libraries that use the real DOM have other ways to optimize component code size. One such way is Template Cloning(using DOM Template ......
Read more >
9 Best Practices for Optimizing Frontend Performance
3. Remove Unnecessary Custom Fonts · Convert fonts to the most efficient format: Loading a modern format like WOFF2 can achieve a ~30%...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found