TreeShaking

[IWANABETHATGUY]

• Tree-shaking
• Start Date: (fill me in with today's date, YYYY-MM-DD)
• Rspack Issue: [speedy-js/rspack#0000](https://github.com/speedy-js/rspack/issues/0000) Issue name should be Tracking issue of <Fill in the RFC title above>

Summary

1. A brief overview of the basic implementation of tree-shaking
2. How webpack implements tree-shaking.
3. Our implementation (prefer esbuild)
4. The tree-shaking is divided into several stages, and the tree-shanking is done incrementally.

Motivation

Support rspack tree-shaking

Guide-level explanation

index.js

• export: []
• import: ['test:foo', 'result:test']

result.js

• export: ['self:test']
• import: ['test:a', 'test:b']

test.js

• export: ['self:a', 'self:b', 'self:foo']
• import: ['']

生成一个 symbol graph

index.js

import {foo} from './test.js';
import {test,} from './result.js'

foo()

test();

result.js

export function test() {
  
}

tes.js

export function b(n) {
  if (n > 0) {
    return a(n - 1);
  }
  
}
export function a(n) {
  if (n > 0) {
    return b(n - 1);
  }

}

export function foo() {
    
}

with side effects

index.js

import {foo} from './test.js';
import {test, c} from './result.js'

console.log(foo())

test();
c();

result.js

import {a, b} from './test.js'
export function c() {
    a;
    b;
}
export function test() {
    console.log('something')
}

test.js

export const a = 3;
export const b = 10;

export function foo() {
    
}

Rationale and alternatives

• SWC resolver

  • After the swc resolver analysis we have a syntaxContext on each binding identifier.

    import { test } from "./test.js";
    test;
    {
      var b = 1000;
    }
    b;
    
    let a = 10;
    
    function another() {
      let a = 100;
    }
    
    another;

    import { test/*#1*/  } from "./test.js";
    test /*#1*/ ;
    {
        var b /*#1*/  = 1000;
    }b /*#1*/ ;
    
    let a /*#1*/  = 10;
    function another/*#1*/() {
        let a /*#2*/  = 100;
    }
    another /*#1*/ ;

  • Create a Symbol graph, and if there is a reference to another binding in any of the declarations, create an edge to that symbol

  • Iterate through all reachable symbols from the root of the graph, and mark all unreachable symbols as unused and wait for DCE to delete them.

  • Side Effect positive and negative propagation

Prior art

Webpack

• Collection Module Export

• Convert named exports to HarmonyExportSpecifierDependency objects

• Convert default exports to HarmonyExportExpressionDependency objects

• Mount all exported information on ModuleGraph

• Mark the module for export use (only variables used directly by the module are recorded, information about indirect references is lost)

  • index.js

    import { a, something, c } from "./test.js";
    // import { aaa, cccc } from "./result.js";
    
    something();
    c

  • test.js

    export const a = 10;
    
    export const b = 3;
    export function something() {
      // const a = 3;
    };
    
    export const c = a.a;

  • webpack.config.js

    /**@type {import('webpack').Configuration} */
    module.exports = {
      mode: "development",
      optimization: {
        innerGraph: true,
        usedExports: true,
        minimize: false,
        concatenateModules: false,
        providedExports: true,
    
      },
    
      devtool: false,
    }

  • output

    /******/ (() => { // webpackBootstrap
    /******/ 	"use strict";
    /******/ 	var __webpack_modules__ = ({
    
    /***/ "./src/test.js":
    /*!*********************!*\
      !*** ./src/test.js ***!
      \*********************/
    /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
    
    /* harmony export */ __webpack_require__.d(__webpack_exports__, {
    /* harmony export */   "c": () => (/* binding */ c),
    /* harmony export */   "something": () => (/* binding */ something)
    /* harmony export */ });
    /* unused harmony exports a, b */
    const a = 10;
    
    const b = 3;
    function something() {
      // const a = 3;
    };
    
    const c = a.a;
    
    
    /***/ })
    
    /******/ 	});

  • esbuild output

    (() => {
      // src/test.js
      var a = 10;
      function something() {
      }
      var c = a.a;
    
      // src/index.js
      something();
    })();

• usedExports

• innerGraph (deep-scope-analysis)
  Resolve issue like Unexpected code after tree-shake webpack/webpack#6264
  

• concatenateModules (scope hoisting)

• provideExports

  • Provide analyze for export * from 'xxx'

Progressive Implementation

1. Mark all esm exports, count unused exports (without side effects tracking)

   1. export xxx and export default

      // a.js
      import {test} from ''
      export function test() {
        
      }

   2. reexport

   3. namespace member accesses

      import * as math from './math';
      
      console.log(math.add(2, 3));

2. side effect tracking

3. module level side effects

4. dynamic import

5. commonJs

6. pure annotations

   export const radius = 23;
   export const area = /*#__PURE__*/ calculateArea(radius);

7. None es module tree shaking (css)

[IWANABETHATGUY]

Esbuild one level lookup

index.mjs

import { a,  c } from "./test.mjs";

export function test() {
	c;
}

test.mjs

function a() {}

export { a,  c };

function c() {
	class Test {
		a() {
			a();
		}
	}
}
// export default 20;

Output

(() => {
  // src/test.mjs
  function a() {
  }
  function c() {
    class Test {
      a() {
        a();
      }
    }
  }

  // src/index.mjs
  console.log();
  function test() {
    c;
  }
})();