DEV Community

frustigor
frustigor

Posted on

2

Use babel to remove ES6 Class no-use properties when bundle your code

In some situation, when we bundle our code, we find some properties of a class are not needed in our project. For example, we wrote a class:

export default class A {
  a = 1
  static b = 2
  c() {}
  static d() {}
  e() {
    return false
  }
}

And we use it in our project like:

import A from './a'

const a = new A()
a.e()

We did not invoke a b c d of class A, but now, we have no idea to shake this methods/properties away from our code. Even through we have tree shaking, the tool like webpack has no idea to shake this no-use properties, it does not know which properties are used, and which are not.

After searching for ways to remove no-use properties, I did not find any good plugins or tools, so I have to write one, and published it as name babel-plugin-shake-class-properties and you can use it very easy.

npm i -D babel-plugin-shake-class-properties

And then modify your babel.config.js. (We only support babel.config.js because we need to point out the file's absolute path.)

// babel.config.js
const path = require('path')

module.exports = {
  ...
  plugins: [
    ['babel-plugin-shake-class-properties', {
      // the only properties we want to keep, other properties will be removed (except constructor)
      retain: [
        {
          file: path.resolve(__dirname, 'node_modules/tyshemo/src/store.js'), // the file's absolute path to match
          class: 'Store', // the class name from which properties will be removed
          properties: ['update', 'set'], // the properties which will be kept
        },
      ],
      // the properties we want to remove, properties even in `retain` will be removed
      remove: [
        {
          file: path.resolve(__dirname, 'node_modules/tyshemo/src/store.js'),
          class: 'Store',
          properties: ['update', 'set'], // the properties which will be removed
        },
      ],
    }],
    ...
  ],
}

In a item string of properties, you can use static async get set * keywords to match certain properties, for example:

class A {
  static a = 1
  get name() {}
  set name() {}
  * f() {}
  async fetch() {}
  async * r() {}
  static async * p() {}
  static get e() {}
}

If you want to remove all properties, aha?? you should use retain with properties: [''], however, to match strict, you could do like:

remove: {
  ...
  properties: [
    'static a',
    'get name',
    'set name',
    '* f',
    'async fetch',
    'async * r',
    'static async * p',
    'static get e',
  ],
}

Notice here, there should must be a space ' ' between * and the name of property.

Only ES6+ source class properties will be matched. The following situation will not work with this plugin. Computed properties will not work as possible:

class A {
  // will never be remove
  constructor() {
    // will not be realized
    this.a = '1'
  }

  // will not be realized
  [`some${a}`]() {}

  // will not be realized
  [Symbol('xxx')]() {}

  // will be treated as dd
  'dd'() {}

  // will be treated as ["dd"]
  ['dd']() {}

  // will be treated as [dd]
  [dd]() {}

  // will be treated as [dd]
  [dd] = 1

  // will be treated as ["dd"]
  ['dd'] = 1
}

function B() {}

// will not be realized
B.prototype.a = function() {}

// will not be realized
// you can use https://github.com/tangshuang/babel-plugin-transform-class-remove-static-properties to remove this
B.b = 'xxx'

If you are interested in this project, follow it on github https://github.com/tangshuang/babel-plugin-shake-class-properties and give a star.

Image of Datadog

How to Diagram Your Cloud Architecture

Cloud architecture diagrams provide critical visibility into the resources in your environment and how they’re connected. In our latest eBook, AWS Solution Architects Jason Mimick and James Wenzel walk through best practices on how to build effective and professional diagrams.

Download the Free eBook

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs