Object Tree-shaking Optimization

The tree-shaking effect for imported objects is limited. In the following examples, tree-shaking optimization can be performed normally when accessing object properties through destructuring.

Tree-shaking Optimization Supported by Rollup

ESM Module Syntax Support

✅ good cases🔧 maths.js

// ✅ good case 1
import * as maths from './maths.js';
// ✅ good case 2
import { square } from './maths.js';
// ✅ good case 3
const { square: square2 } = await import('./maths.js');
// ✅ good case 4
import('./maths.js').then(({ square }) => console.log(square(10)));
console.log(maths.square(10), square, square2);

export const square = x => x * x;
export const double = x => x * 2;
export default { square, double };

✅ good case output

const square = x => x * x;
var maths = /*#__PURE__*/ Object.freeze({
  __proto__: null,
  square
});
const { square: square2 } = await Promise.resolve().then(function () {
  return maths;
});
Promise.resolve()
  .then(function () {
    return maths;
  })
  .then(({ square }) => console.log(square(10)));
console.log(square(10), square, square2);

❌ bad case1❌ bad case2❌ bad case3🔧 maths.js

import a from './maths.js';
console.log(a.square(10));

const a = await import('./maths.js');
console.log(a.square(10));

import('./maths.js').then(a => console.log(a.square(10)));

export const square = x => x * x;
export const double = x => x * 2;
export default { square, double };

❌ bad case1 output❌ bad case2 output❌ bad case3 outputmaths-BMpjz1lG.js

const square = x => x * x;
const double = x => x * 2;
var a = { square, double };
console.log(a.square(10));

const a = await import('./maths-BMpjz1lG.js');
console.log(a.square(10));

import('./maths-BMpjz1lG.js').then(a => console.log(a.square(10)));

const square = x => x * x;
const double = x => x * 2;
var maths = { square, double };

export { maths as default, double, square };

ESM Module Tree-shaking Syntax Summary

From the above examples, we can see that Rollup supports tree-shaking optimization for all ESM module import methods except for object references. Currently, tree-shaking optimization for object references is only supported for namespace object references.

Commonjs Module Syntax Support

For tree-shaking optimization of Commonjs modules, it is relatively strict.

You need to configure strictRequires to false or auto to avoid packaging the Commonjs module. Because when strictRequires is not true, the plugin will try its best to ensure that the translated ESM module is static, details can be found in the Default Strict Requires To True article.
You need to ensure that the Commonjs module uses the exports syntax to export.
You need to ensure that when importing the module using the import() method, you also use destructuring to get the exported attribute value.

The following examples are used as explanations. index.mjs is used as the entry module:

index.mjsa.cjsb.cjsrollup.config.js

export * from './a.cjs';

(async () => {
  const { square } = await import('./b.cjs');
  console.log(square(10));
})();

const square = x => x * x;
const add = (a, b) => a + b;
const sub = (a, b) => a - b;

exports.square = square;
exports.add = add;
exports.sub = sub;

import commonjs from '@rollup/plugin-commonjs';

export default {
  input: {
    index: './index.mjs'
  },
  output: [
    {
      dir: 'dist/commonjs/esm',
      format: 'es',
      entryFileNames: 'output.js'
    }
  ],
  treeshake: true,
  plugins: [
    commonjs({
      strictRequires: false
    })
  ]
};

output.jsb-Co0LKdJH.js

(async () => {
  const { square } = await import('./b-Co0LKdJH.js').then(function (n) {
    return n.b;
  });
  console.log(square(10));
})();

const square = x => x * x;

var square_1 = square;

var b = /*#__PURE__*/ Object.freeze({
  __proto__: null,
  square: square_1
});

export { b };

Object Depth Tree-shaking Optimization

From the above, we can see that no matter how we handle ESM modules or Commonjs modules, Rollup's tree-shaking optimization effect for object references is very limited. Currently, it only supports tree-shaking optimization for namespace object references of ESM modules. At the same time, for tree-shaking optimization of Commonjs modules, it is even more limited. The main reason is that Rollup's tree-shaking optimization for objects is not thorough enough.

The feat: implement object tree-shaking PR is proposed to implement deep tree-shaking optimization for objects in Rollup.

This is essentially a deep tree-shaking optimization for objects, doing deeper tree-shaking optimization for accessing object structure attributes. This PR merge also means deeper optimization for tree-shaking of Commonjs modules.

TODO: Wait for object tree-shaking PR implementation principle supplement.

Contributors

XiSenao

Changelog

Last edited 21 days ago

View full history

Object Tree-shaking Optimization ​

Tree-shaking Optimization Supported by Rollup ​

ESM Module Syntax Support ​

Commonjs Module Syntax Support ​

Object Depth Tree-shaking Optimization ​