chore(refactor): optimize tree shake implemetation to improve perform…

…ance (#1284)

* chore(refactor): optimize tree shake implemetation to improve performance

* chore: all tree shake tests passed

* chore(refactor): tree shake modules traverse

* chore: update unit tests

* fix: tree shake use self defined idents

* chore: solve cargo clippy issue

---------

Co-authored-by: brightwwu <[email protected]>

.changeset/famous-pets-rule.md

@@ -0,0 +1,5 @@
+---
+'@farmfe/core': patch
+---
+
+chore(refactor): optimize tree shake implemetation to improve performance

.vscode/settings.json

@@ -4,15 +4,15 @@
   "biome.enabled": true,
   "editor.defaultFormatter": "biomejs.biome",
   "[typescript]": {
-    "editor.defaultFormatter": "biomejs.biome",
+    "editor.defaultFormatter": "biomejs.biome"
   },
   "[javascript]": {
-    "editor.defaultFormatter": "biomejs.biome",
+    "editor.defaultFormatter": "biomejs.biome"
   },
   "[rust]": {
     "editor.defaultFormatter": "rust-lang.rust-analyzer"
   },
   "[toml]": {
     "editor.defaultFormatter": "tamasfe.even-better-toml"
-  },
+  }
 }

crates/compiler/src/lib.rs

@@ -128,7 +128,20 @@ impl Compiler {
     {
       #[cfg(feature = "profile")]
       farmfe_core::puffin::profile_scope!("Build Stage");
+      // let write_module_cache = || {
+      //   if self.context.config.persistent_cache.enabled() {
+      //     self.context.cache_manager.module_cache.write_cache();
+      //   }
+      // };
       self.build()?;
+      // .map(|v| {
+      //   write_module_cache();
+      //   v
+      // })
+      // .map_err(|err| {
+      //   write_module_cache();
+      //   err
+      // })?;
     }
 
     {

crates/compiler/src/update/mod.rs

@@ -9,7 +9,6 @@ use farmfe_core::{
   error::CompilationError,
   module::{
     module_graph::ModuleGraphEdgeDataItem, module_group::ModuleGroupId, Module, ModuleId,
-    ModuleType,
   },
   plugin::{PluginResolveHookParam, ResolveKind, UpdateResult, UpdateType},
   resource::ResourceType,

crates/compiler/tests/common/mod.rs

@@ -131,6 +131,7 @@ pub fn create_compiler(
       external: vec![
         ConfigRegex::new("^react-refresh$"),
         ConfigRegex::new("^module$"),
+        ConfigRegex::new("^vue$"),
       ],
       sourcemap: SourcemapConfig::Bool(false),
       lazy_compilation: false,

crates/compiler/tests/fixtures/partial_bundling/basic/output.js

@@ -25,7 +25,7 @@
 ,});
 
 //index.js:
- import "./__farm_runtime.acdc4364.mjs";import "./index_2faa.js";import "./index_64d2.js";(globalThis || window || global)['__farm_default_namespace__'].__farm_module_system__.setExternalModules({"module": {...((globalThis||window||{})['module']||{}),__esModule:true}});(function(_){for(var r in _){_[r].__farm_resource_pot__='index_dcdc.js';(globalThis || window || global)['__farm_default_namespace__'].__farm_module_system__.register(r,_[r])}})({"b5d64806":function  (module, exports, farmRequire, farmDynamicRequire) {
+ import "./__farm_runtime.acdc4364.mjs";import "./index_2faa.js";import "./index_64d2.js";(globalThis || window || global)['__farm_default_namespace__'].__farm_module_system__.setExternalModules({"module": ((globalThis||window||{})['module']||{}).default && !((globalThis||window||{})['module']||{}).__esModule ? {...((globalThis||window||{})['module']||{}),__esModule:true} : ((globalThis||window||{})['module']||{})});(function(_){for(var r in _){_[r].__farm_resource_pot__='index_dcdc.js';(globalThis || window || global)['__farm_default_namespace__'].__farm_module_system__.register(r,_[r])}})({"b5d64806":function  (module, exports, farmRequire, farmDynamicRequire) {
     "use strict";
     Object.defineProperty(exports, "__esModule", {
         value: true

crates/compiler/tests/fixtures/tree_shake/cjs/cjs_1.js

@@ -0,0 +1,10 @@
+const b = require('./cjs_2.js');
+
+function a() {
+  return b();
+}
+
+module.exports = {
+  a,
+  b
+};

crates/compiler/tests/fixtures/tree_shake/cjs/cjs_2.js

@@ -0,0 +1,3 @@
+module.exports = function () {
+  return 'b';
+};

crates/compiler/tests/fixtures/tree_shake/cjs/index.ts

@@ -0,0 +1,3 @@
+import a from './cjs_1';
+
+console.log(a);

crates/compiler/tests/fixtures/tree_shake/cjs/output.js

@@ -0,0 +1,31 @@
+//index.js:
+ (globalThis || window || global)['__farm_default_namespace__'] = {__FARM_TARGET_ENV__: 'browser'};(function(r,e){var t={};function n(r){return Promise.resolve(o(r))}function o(e){if(t[e])return t[e].exports;var i={id:e,exports:{}};t[e]=i;r[e](i,i.exports,o,n);return i.exports}o(e)})({"d2214aaa":function  (module, exports, farmRequire, farmDynamicRequire) {
+    console.log("runtime/index.js")(globalThis || window || global)["__farm_default_namespace__"].__farm_module_system__.setPlugins([]);
+}
+,},"d2214aaa");(function(_){for(var r in _){_[r].__farm_resource_pot__='index_6889.js';(globalThis || window || global)['__farm_default_namespace__'].__farm_module_system__.register(r,_[r])}})({"3da733a3":function  (module, exports, farmRequire, farmDynamicRequire) {
+    module.exports = function() {
+        return "b";
+    };
+}
+,
+"a3823798":function  (module, exports, farmRequire, farmDynamicRequire) {
+    const b = farmRequire("3da733a3", true);
+    function a() {
+        return b();
+    }
+    module.exports = {
+        a,
+        b
+    };
+}
+,
+"b5d64806":function  (module, exports, farmRequire, farmDynamicRequire) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", {
+        value: true
+    });
+    var _interop_require_default = farmRequire("@swc/helpers/_/_interop_require_default");
+    var _cjs_1 = _interop_require_default._(farmRequire("a3823798"));
+    console.log(_cjs_1.default);
+}
+,});(globalThis || window || global)['__farm_default_namespace__'].__farm_module_system__.setInitialLoadedResources([]);(globalThis || window || global)['__farm_default_namespace__'].__farm_module_system__.setDynamicModuleResourcesMap({  });var farmModuleSystem = (globalThis || window || global)['__farm_default_namespace__'].__farm_module_system__;farmModuleSystem.bootstrap();var entry = farmModuleSystem.require("b5d64806");

crates/compiler/tests/fixtures/tree_shake/compiled-vue-comp/comp-ts.ts

@@ -0,0 +1,62 @@
+import { defineComponent as _defineComponent } from 'vue'
+import { createTextVNode as _createTextVNode, resolveComponent as _resolveComponent, withCtx as _withCtx, createVNode as _createVNode, createElementVNode as _createElementVNode, createStaticVNode as _createStaticVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue"
+const _imports_0 = "URL_ADDRESS"
+
+
+const _withScopeId = n => (_pushScopeId("data-v-370e85d7"),n=n(),_popScopeId(),n)
+const _hoisted_1 = { class: "container" }
+const _hoisted_2 = /*#__PURE__*/_createStaticVNode("<a href=\"https://farmfe.org/\" target=\"_blank\" data-v-370e85d7><div class=\"logo1\" data-v-370e85d7></div><div class=\"logo2\" data-v-370e85d7></div></a><a href=\"https://farmfe.org/\" target=\"_blank\" data-v-370e85d7><img src=\"" + _imports_0 + "\" class=\"logo\" alt=\"Farm logo\" data-v-370e85d7></a>", 2)
+const _hoisted_4 = {
+  href: "https://vuejs.org/",
+  target: "_blank"
+}
+
+const HelloWorld = /*#__PURE__*/_defineComponent({});
+const Formatter= /*#__PURE__*/_defineComponent({});
+
+
+export default /*#__PURE__*/_defineComponent({
+  __name: 'index',
+  setup(__props) {
+
+
+return (_ctx: any,_cache: any) => {
+  const _component_el_button = _resolveComponent("el-button")!
+  const _component_my_svg_icon = _resolveComponent("my-svg-icon")!
+  const _component_el_config_provider = _resolveComponent("el-config-provider")!
+
+  return (_openBlock(), _createElementBlock(_Fragment, null, [
+    _createVNode(_component_el_button, {
+      type: "primary",
+      onClick: _cache[0] || (_cache[0] = ($event: any) => (_ctx.$router.push('/about')))
+    }, {
+      default: _withCtx(() => [
+        _createTextVNode("to about page")
+      ]),
+      _: 1
+    }),
+    _createElementVNode("div", _hoisted_1, [
+      _hoisted_2,
+      _createElementVNode("a", _hoisted_4, [
+        _createVNode(_component_my_svg_icon, {
+          name: "icon-vue",
+          class: "logo",
+          style: {"height":"6.25rem","width":"6.25rem"}
+        })
+      ])
+    ]),
+    _createVNode(_component_el_config_provider, {
+      size: 'large',
+      "z-index": 3000
+    }, {
+      default: _withCtx(() => [
+        _createVNode(HelloWorld, { msg: "Farm + Vue" }),
+        _createVNode(Formatter)
+      ]),
+      _: 1
+    })
+  ], 64))
+}
+}
+
+})

crates/compiler/tests/fixtures/tree_shake/compiled-vue-comp/comp.js

@@ -0,0 +1,6 @@
+import _sfc_main from "./comp-ts";
+export * from "./comp-ts";
+
+import helper from "./helper";
+
+export default helper(_sfc_main);

crates/compiler/tests/fixtures/tree_shake/compiled-vue-comp/helper.js

@@ -0,0 +1 @@
+export default (a) => a;

crates/compiler/tests/fixtures/tree_shake/compiled-vue-comp/index.ts

@@ -0,0 +1,4 @@
+import comp from "./comp";
+export * from './comp';
+
+console.log(comp);

crates/compiler/tests/fixtures/tree_shake/compiled-vue-comp/output.js

@@ -0,0 +1,118 @@
+//index.js:
+ (globalThis || window || global)['__farm_default_namespace__'] = {__FARM_TARGET_ENV__: 'browser'};(function(r,e){var t={};function n(r){return Promise.resolve(o(r))}function o(e){if(t[e])return t[e].exports;var i={id:e,exports:{}};t[e]=i;r[e](i,i.exports,o,n);return i.exports}o(e)})({"d2214aaa":function  (module, exports, farmRequire, farmDynamicRequire) {
+    console.log("runtime/index.js")(globalThis || window || global)["__farm_default_namespace__"].__farm_module_system__.setPlugins([]);
+}
+,},"d2214aaa");(globalThis || window || global)['__farm_default_namespace__'].__farm_module_system__.setExternalModules({"vue": ((globalThis||window||{})['vue']||{}).default && !((globalThis||window||{})['vue']||{}).__esModule ? {...((globalThis||window||{})['vue']||{}),__esModule:true} : ((globalThis||window||{})['vue']||{})});(function(_){for(var r in _){_[r].__farm_resource_pot__='index_236f.js';(globalThis || window || global)['__farm_default_namespace__'].__farm_module_system__.register(r,_[r])}})({"8cea7e1d":function  (module, exports, farmRequire, farmDynamicRequire) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", {
+        value: true
+    });
+    Object.defineProperty(exports, "default", {
+        enumerable: true,
+        get: function() {
+            return _default;
+        }
+    });
+    var _default = (a)=>a;
+}
+,
+"ae8e2392":function  (module, exports, farmRequire, farmDynamicRequire) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", {
+        value: true
+    });
+    Object.defineProperty(exports, "default", {
+        enumerable: true,
+        get: function() {
+            return _default;
+        }
+    });
+    var _vue = farmRequire("vue");
+    const _imports_0 = "URL_ADDRESS";
+    const _hoisted_1 = {
+        class: "container"
+    };
+    const _hoisted_2 = (0, _vue.createStaticVNode)('<a href="https://farmfe.org/" target="_blank" data-v-370e85d7><div class="logo1" data-v-370e85d7></div><div class="logo2" data-v-370e85d7></div></a><a href="https://farmfe.org/" target="_blank" data-v-370e85d7><img src="' + _imports_0 + '" class="logo" alt="Farm logo" data-v-370e85d7></a>', 2);
+    const _hoisted_4 = {
+        href: "https://vuejs.org/",
+        target: "_blank"
+    };
+    const HelloWorld = (0, _vue.defineComponent)({});
+    const Formatter = (0, _vue.defineComponent)({});
+    var _default = (0, _vue.defineComponent)({
+        __name: "index",
+        setup (__props) {
+            return (_ctx, _cache)=>{
+                const _component_el_button = (0, _vue.resolveComponent)("el-button");
+                const _component_my_svg_icon = (0, _vue.resolveComponent)("my-svg-icon");
+                const _component_el_config_provider = (0, _vue.resolveComponent)("el-config-provider");
+                return (0, _vue.openBlock)(), (0, _vue.createElementBlock)(_vue.Fragment, null, [
+                    (0, _vue.createVNode)(_component_el_button, {
+                        type: "primary",
+                        onClick: _cache[0] || (_cache[0] = ($event)=>_ctx.$router.push("/about"))
+                    }, {
+                        default: (0, _vue.withCtx)(()=>[
+                                (0, _vue.createTextVNode)("to about page")
+                            ]),
+                        _: 1
+                    }),
+                    (0, _vue.createElementVNode)("div", _hoisted_1, [
+                        _hoisted_2,
+                        (0, _vue.createElementVNode)("a", _hoisted_4, [
+                            (0, _vue.createVNode)(_component_my_svg_icon, {
+                                name: "icon-vue",
+                                class: "logo",
+                                style: {
+                                    "height": "6.25rem",
+                                    "width": "6.25rem"
+                                }
+                            })
+                        ])
+                    ]),
+                    (0, _vue.createVNode)(_component_el_config_provider, {
+                        size: "large",
+                        "z-index": 3000
+                    }, {
+                        default: (0, _vue.withCtx)(()=>[
+                                (0, _vue.createVNode)(HelloWorld, {
+                                    msg: "Farm + Vue"
+                                }),
+                                (0, _vue.createVNode)(Formatter)
+                            ]),
+                        _: 1
+                    })
+                ], 64);
+            };
+        }
+    });
+}
+,
+"b5d64806":function  (module, exports, farmRequire, farmDynamicRequire) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", {
+        value: true
+    });
+    var _export_star = farmRequire("@swc/helpers/_/_export_star");
+    var _interop_require_default = farmRequire("@swc/helpers/_/_interop_require_default");
+    var _comp = _interop_require_default._(_export_star._(farmRequire("d1fd5279"), exports));
+    console.log(_comp.default);
+}
+,
+"d1fd5279":function  (module, exports, farmRequire, farmDynamicRequire) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", {
+        value: true
+    });
+    Object.defineProperty(exports, "default", {
+        enumerable: true,
+        get: function() {
+            return _default;
+        }
+    });
+    var _export_star = farmRequire("@swc/helpers/_/_export_star");
+    var _interop_require_default = farmRequire("@swc/helpers/_/_interop_require_default");
+    var _compts = _interop_require_default._(_export_star._(farmRequire("ae8e2392"), exports));
+    var _helper = _interop_require_default._(farmRequire("8cea7e1d"));
+    var _default = (0, _helper.default)(_compts.default);
+}
+,});(globalThis || window || global)['__farm_default_namespace__'].__farm_module_system__.setInitialLoadedResources([]);(globalThis || window || global)['__farm_default_namespace__'].__farm_module_system__.setDynamicModuleResourcesMap({  });var farmModuleSystem = (globalThis || window || global)['__farm_default_namespace__'].__farm_module_system__;farmModuleSystem.bootstrap();var entry = farmModuleSystem.require("b5d64806");