1. Tutorials
  2. JavaScript

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:

❤️ Is this article helpful?
Buy me a coffee☕ or support my work to keep this space 🖖 and ad-free.
If you can't, do send some 💖 to @d_luaz or help to share this article.
👶 Apps I built
Travelopy - discover travel places in Malaysia, Singapore, Taiwan, Japan.
Pixtory App (Alpha) - easily organize photos on your phone into a blog.
暖心芽 (WIP) 🌞❤️🌱 - reminder of hope, warmth, thoughts and feelings (or just quotes).
LuaPass - offline password manager
By Desmond Lua
A dream boy who enjoys making apps, travelling and gardening. Follow me on @d_luaz.
This work is licensed under a
Creative Commons Attribution-NonCommercial 4.0 International License.