fix: enable dead code elimination in split-route to remove unused imports

Author: schiller-manuel

packages/router-plugin/src/core/code-splitter/compilers.ts

@@ -727,19 +727,33 @@ export function compileCodeSplitVirtualRoute(
 
             if (path.node.declaration) {
               if (t.isVariableDeclaration(path.node.declaration)) {
-                path.replaceWith(
-                  t.importDeclaration(
-                    path.node.declaration.declarations.map((decl) =>
-                      t.importSpecifier(
-                        t.identifier((decl.id as any).name),
-                        t.identifier((decl.id as any).name),
-                      ),
-                    ),
-                    t.stringLiteral(
-                      removeSplitSearchParamFromFilename(opts.filename),
+                const importDecl = t.importDeclaration(
+                  path.node.declaration.declarations.map((decl) =>
+                    t.importSpecifier(
+                      t.identifier((decl.id as any).name),
+                      t.identifier((decl.id as any).name),
                     ),
                   ),
+                  t.stringLiteral(
+                    removeSplitSearchParamFromFilename(opts.filename),
+                  ),
                 )
+
+                path.replaceWith(importDecl)
+
+                // Track the imported identifier paths so deadCodeElimination can remove them if unused
+                // We need to traverse the newly created import to get the identifier paths
+                path.traverse({
+                  Identifier(identPath) {
+                    // Only track the local binding identifiers (the imported names)
+                    if (
+                      identPath.parentPath.isImportSpecifier() &&
+                      identPath.key === 'local'
+                    ) {
+                      refIdents.add(identPath)
+                    }
+                  },
+                })
               }
             }
           },

packages/router-plugin/tests/code-splitter/snapshots/react/1-default/arrow-function@errorComponent.tsx

@@ -1,2 +1 @@
-import * as React from 'react';
-import { Route } from "arrow-function.tsx";
+import * as React from 'react';

packages/router-plugin/tests/code-splitter/snapshots/react/1-default/arrow-function@notFoundComponent.tsx

@@ -1,2 +1 @@
-import * as React from 'react';
-import { Route } from "arrow-function.tsx";
+import * as React from 'react';

packages/router-plugin/tests/code-splitter/snapshots/react/1-default/boolean-null-literals@component.tsx

@@ -1,4 +1,3 @@
 // Test errorComponent with false literal
-import { Route } from "boolean-null-literals.tsx";
 const SplitComponent = () => <div>Test Component</div>;
 export { SplitComponent as component };

packages/router-plugin/tests/code-splitter/snapshots/react/1-default/boolean-null-literals@errorComponent.tsx

@@ -1,2 +0,0 @@
-// Test errorComponent with false literal
-import { Route } from "boolean-null-literals.tsx";

packages/router-plugin/tests/code-splitter/snapshots/react/1-default/boolean-null-literals@notFoundComponent.tsx

@@ -1,2 +0,0 @@
-// Test errorComponent with false literal
-import { Route } from "boolean-null-literals.tsx";

packages/router-plugin/tests/code-splitter/snapshots/react/1-default/chinese@component.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { Route } from "chinese.tsx";
 function HomeComponent() {
   return <div className="p-2">
       <Demo title="标题很好看，谁说不是呢？" />

packages/router-plugin/tests/code-splitter/snapshots/react/1-default/chinese@errorComponent.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { Route } from "chinese.tsx";
 interface DemoProps {
   title: string;
 }

packages/router-plugin/tests/code-splitter/snapshots/react/1-default/chinese@notFoundComponent.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { Route } from "chinese.tsx";
 interface DemoProps {
   title: string;
 }

packages/router-plugin/tests/code-splitter/snapshots/react/1-default/circular-reference-arrow-function@component.tsx

@@ -16,5 +16,4 @@ function OtherComponent() {
   });
   return <div>App component name is {componentName}</div>;
 }
-import { Route } from "circular-reference-arrow-function.tsx";
 export { App as component };