added a more detailed example for tree-shaking clarification

[Vansh5632]

Enhance Tree Shaking Documentation with Full Example

This PR enhances the tree shaking documentation by adding a comprehensive section that explains side effects in more detail with a practical example.
Fixes: #7414

Changes

• Added a new section "Full Example: Understanding Side Effects with CSS Files" that demonstrates:

  • A complete directory structure for a fictional UI component library
  • Content of key files including CSS files that constitute side effects
  • What happens when webpack processes imports with different sideEffects configurations
  • The specific impact of incorrectly marking files with side effects

• Added a "Common Pitfalls with Side Effects" section covering:

  • Over-optimistic use of sideEffects: false
  • Issues with re-exports containing side effects
  • Problems with nested dependencies
  • Testing pitfalls in development mode

Rationale

The existing documentation uses the Shopify Polaris example but doesn't provide enough context about the full structure of the files, making it challenging for readers to understand the practical implications of the sideEffects flag.

This enhancement gives readers a more concrete example that shows the direct impact of incorrect side effects configuration (particularly for CSS files) and provides guidance on how to diagnose and fix these issues.

[vercel]

@Vansh5632 is attempting to deploy a commit to the OpenJS Foundation Team on Vercel.

A member of the Team first needs to authorize it.

[alexander-akait]

/cc @snitin315 Can you look why ci failed?

[snitin315]

checking...