Build Tooling35-60 min
Tree Shaking and Dead Code Elimination
Audit imports, avoid whole-library pulls, preserve side-effect metadata, and verify bundle reductions after changes.
ViteRollupWebpackTypeScript
Prerequisites
- A production build with visible chunk sizes.
- A suspected large dependency or duplicated import.
- Access to package and bundler configuration.
1
Plan the implementation
Start by choosing the exact page, route, API, or deployment surface you want to improve. A narrow target makes the implementation measurable and easier to verify.
- Write down the current behavior and the user-facing problem it creates.
- Pick one measurable success signal such as bundle size, latency, error rate, security coverage, or UI responsiveness.
- Identify the files, routes, providers, and environment variables involved.
- Create a rollback note before changing production-sensitive configuration.
2
Set up the required tools
Install or configure only the tools needed for this implementation. Keep config close to the feature so future developers can find the moving parts quickly.
Implementation snippet
npm run build
npm install -D rollup-plugin-visualizerChecklist
- Dependencies are added to the correct workspace package.
- Environment variables are documented in `.env.example` when needed.
- Local development still starts without production-only secrets.
- The change is small enough to review in one pull request.
3
Implement the core pattern
- Find large dependencies in build output or analyzer output.
- Replace namespace or default whole-library imports with focused imports.
- Remove dead feature flags, unused exports, and abandoned routes.
- Check package `sideEffects` settings only when you understand module side effects.
- Rebuild and compare gzip sizes.
Implementation snippet
import debounce from "lodash/debounce";
import { format } from "date-fns/format";
// Prefer focused imports over importing entire utility libraries.4
Handle edge cases
Checklist
- Large utility libraries are imported by function or subpath.
- Unused components are not imported through barrel files.
- CSS side effects still load where expected.
- Bundle size reduction is confirmed in production output.
5
Verify before production
- Run the app locally and test the normal success path.
- Test one failure path, one empty state, and one slow-network or retry path.
- Run the project build and any related unit or integration tests.
- Check browser console, server logs, and network responses for hidden warnings.
- Document the final behavior, commands used, and any follow-up work.