JavaScript Write Tree Shaking Friendly Modules (ECMAScript)

April 13, 2022

CommonJS modules usually involves module.exports and require.

ECMAScript/ES2015/ES6 modules usually involve export and import.

NOTE: I believe ECMAScript/ES6 is better for size optimization / tree-shaking as compared to CommonJS, but I might be wrong.

Sample ECMAScript/ES6 modules: ~/libs/client.js

// import RelativeTime from '@yaireo/relative-time'

export function simpleSlugify(str) {
  return str.toLowerCase()
    .replace(/\s+/g, '-')           // Replace spaces with -
    .replace(/[^\w\-]+/g, '')       // Remove all non-word chars
    .replace(/\-\-+/g, '-')         // Replace multiple - with single -
    .replace(/^-+/, '')             // Trim - from start of text
    .replace(/-+$/, '');            // Trim - from end of text
}

export function isMobile() {
  if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent))
    return true
  return false
}

export function ago(date) {
  // I am not sure if this approach will work well (or made it worse)
  const RelativeTime = require('@yaireo/relative-time')
  const relativeTime = new RelativeTime();
  return relativeTime.from(date)
}

export default {
  simpleSlugify, isMobile, ago
}

How to import

import { extractDomain } from '~/libs/client'

NOTE: I am using Nuxt, which uses Webpack for tree-shaking.

References:

This work is licensed under a
Creative Commons Attribution-NonCommercial 4.0 International License.