#webpack

webpack

webpack ra đời như một công cụ module bundler để giải quyết vấn đề quản lý phụ thuộc trong các dự án front‑end phức tạp. Nguyên nhân kỹ thuật của nó là phân tích đồ thị phụ thuộc của các file JavaScript (và qua loader, các tài nguyên khác như CSS, hình ảnh) rồi tạo ra một hoặc nhiều bundle tối ưu để chạy trên trình duyệt. Hệ quả là các nhà phát triển có thể viết mã theo chuẩn ES modules hoặc CommonJS mà không lo về sự tương thích của trình duyệt, đồng thời giảm số lượng request HTTP và kích thước tải nhờ các tính năng như code splitting và tree shaking. Điều đáng học là việc hiểu cách cấu hình entry, output, loader và plugin giúp bạn tùy chỉnh quy trình build linh hoạt, tối ưu hiệu suất và dễ dàng tích hợp các công nghệ mới như TypeScript, React hoặc Sass. Nếu bạn đang cân nhắc đọc bài gốc, lưu ý rằng bài sẽ đi sâu hơn vào ví dụ cấu hình thực tế và các mẹo nâng cao như module federation hoặc caching lâu dài.

Đọc bài này giúp bạn hiểu cách webpack tối ưu hóa việc quản lý và đóng gói tài nguyên trong dự án web.

Migrating ts-loader to TypeScript 7.1 with AI

Tác giả chia sẻ cách sử dụng AI để di chuyển dự án ts-loader lên phiên bản TypeScript 7.1.

Những người phát triển cần hiểu cách AI giúp tự động hóa quá trình chuyển đổi từ ts-loader sang TypeScript 7.1 để tiết kiệm thời gian và tránh lỗi thủ công trong việc nâng cấp công cụ hỗ trợ cho dự án TypeScript.

Module Federation: The Backbone of Modern Micro-Frontends

Module Federation là nền tảng quan trọng cho kiến trúc micro-frontends hiện đại, thay thế các ứng dụng monolithic nhờ khả năng tích hợp độc lập các module frontend.

Lập trình viên cần đọc bài này để hiểu cách Module Federation giúp chia nhỏ ứng dụng thành các module độc lập, tối ưu hóa phát triển, deploy và bảo trì cho các dự án phức tạp bằng cách kết hợp các framework khác nhau mà không cần thay đổi kiến trúc chung.

Red Hat OpenShift 4.22: What dynamic plugin developers need to know

Red Hat OpenShift 4.22 yêu cầu nhà phát triển plugin cho web console cập nhật lên phiên bản mới, bao gồm nâng cấp dependencies như React 18 và sử dụng công cụ Claude Code để hỗ trợ quá trình nâng cấp.

Lập trình viên phát triển plugin động cho OpenShift nên đọc bài này để biết cách chuyển đổi plugin của mình cho OpenShift 4.22 và tránh gặp rắc rối về phiên bản React 18 cùng cách sử dụng Claude Code để nâng cấp hiệu quả.

Build at Zepto Speed: How We Cut Frontend Webpack Build Times by 95%

Zepto's frontend team reduced CI build times from 20+ minutes to ~2 minutes without migrating away from Webpack. By profiling the pipeline first using ProgressPlugin and Speed Measure Plugin, they discovered the real bottleneck was Terser minification (13+ minutes), not the bundler itself. The fix involved replacing Babel with SWC for transpilation, swapping Terser for esbuild for minification, adopting LightningCSS for CSS optimization, switching to pnpm for dependency management, and restructuring Dockerfiles for better layer caching. A hidden bottleneck — AWS CodeArtifact token expiry causing Docker cache busting — was also resolved. The result was a 95% reduction in build time while preserving ecosystem stability.

Open source: Who is your DR?

John Reilly, người duy trì lâu năm dự án ts-loader (loader TypeScript cho webpack, 50 triệu lượt tải/tháng), chia sẻ về chẩn đoán bệnh nặng năm 2023 và kêu gọi cộng đồng open source lập kế hoạch kế nhiệm. Anh chỉ định Ashley Claymore, đại biểu TC39 kiêm kỹ sư Bloomberg, làm người kế nhiệm ts-loader nếu bản thân không thể tiếp tục.

Lập trình viên nên đọc bài này để hiểu cách xây dựng kế hoạch chuyển giao dự án open source vững chắc, tránh tình trạng dự án bị ngừng phát triển khi maintainer mất thời gian hoặc sức khỏe.