Git Product home page Git Product logo

Comments (2)

mobily avatar mobily commented on May 16, 2024 1

hello @mittnavnermike 👋 all ts-belt functions are tree-shakeable in the modern bundlers (webpack, rollup, parcel) even if you import the entire function set like the current recommended approach:

import { A } from '@mobily/ts-belt

I have already double-checked this by adding ts-belt in the following "benchmark" locally: https://github.com/mischnic/tree-shaking-example (esbuild on the other hand generates a much bigger bundle for all tested libraries)

file                size      error
------------------  --------  -----
webpack/ts-belt        0.8kb
parcel/ts-belt         0.8kb
rollup/ts-belt         0.8kb
esbuild/ts-belt       39.9kb

rollup/lodash-es      18.0kb
parcel/lodash-es      18.3kb
webpack/lodash-es     20.2kb
esbuild/lodash-es     57.9kb

rollup/lodash         70.6kb
parcel/lodash         70.7kb
webpack/lodash        71.1kb
esbuild/lodash       217.4kb

webpack/rxjs           9.3kb
parcel/rxjs           10.1kb
rollup/rxjs           10.1kb
esbuild/rxjs          37.6kb

webpack/remeda         2.1kb
rollup/remeda          2.2kb
esbuild/remeda         5.4kb
parcel/remeda          7.1kb

parcel/ramda           6.3kb
webpack/ramda          6.4kb
rollup/ramda           6.4kb
esbuild/ramda         13.8kb

rollup/ramdaBabel      6.5kb
parcel/ramdaBabel      6.6kb
webpack/ramdaBabel     7.6kb
esbuild/ramdaBabel    20.8kb

rollup/rambda          1.2kb
webpack/rambda         2.8kb
parcel/rambda          2.8kb
esbuild/rambda         7.0kb

rollup/rambdax         4.9kb
parcel/rambdax         6.4kb
webpack/rambdax        6.5kb
esbuild/rambdax       14.0kb

the ts-belt file content used in tree-shaking-example:

import { pipe, A } from '@mobily/ts-belt'

const isOdd = x => {
  return x % 2 === 0
}

const fn = x => {
  return pipe(
    A.range(2, x),
    A.filter(isOdd),
    A.join(', '),
  )
}

export const answer = fn(10)

you can import functions explicitly from each namespace but it requires some config changes, here's the example:

import { pipe } from '@mobily/ts-belt/pipe'
import { flatMap,mapWithDefault } from '@mobily/ts-belt/Option'
import { dropExactly, head } from '@mobily/ts-belt/Array'

const value = pipe(
  [1, 2, 3],
  dropExactly(2),
  flatMap(head),
  mapWithDefault(0, x => x * 3)
)

Configure path mapping in tsconfig.json:

"paths": {
  "@mobily/ts-belt/*": ["./node_modules/@mobily/ts-belt/dist/esm/*"]
}

Add babel-plugin-transform-imports and use it in babel.config.js:

['transform-imports', {
  "@mobily\/ts-belt\/((?!dist)\\w+)": {
    transform: function(importName, matches) {
      return path.resolve(__dirname, './node_modules/@mobily/ts-belt/dist/esm', matches[1])
    },
    "skipDefaultConversion": true,
  }
}]

let me know if this is what you wanted to achieve 😊

from ts-belt.

mittnavnermike avatar mittnavnermike commented on May 16, 2024

Thank you for a very detailed answer! I'll try your approach

from ts-belt.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.