Tại sao cần webpack?
Bài viết giải thích tại sao webpack là công cụ cần thiết trong phát triển ứng dụng web hiện đại. Tác giả so sánh giữa server rendering và client rendering (SPA), phân tích cách hoạt động của từng mô hình, và lý giải tại sao webpack giúp giải quyết các vấn đề phức tạp khi phát triển ứng dụng JavaScript phía client như quản lý module, tối ưu hóa tài nguyên, và hỗ trợ các tính năng mới của JavaScript.
My story
Có lẽ mình cũng như nhiều bạn học từ native mobile app -> React Native rồi mới đến React nên 'quy trình' có vẻ không đúng lắm.
Thành ra khi học React thì chỉ biết cài webpack để chạy thôi, hay xài luôn create-react-app thì khỏi cần webpack gì cả. Khi lên trang chủ của webpack để đọc document thì ôi thôi rồi đọc càng khó hiểu hơn. Vậy rốt cuộc tại sao cần webpack?
Server rendering và client rendering
Để hiểu được tại sao dùng webpack, ta nên tìm hiểu qua về server rendering và client rendering.
Quick Note: Mình đọc một số blog trên mạng có thể thế thuật ngữ client rendering là Single Page Application (SPA) luôn, tại SPA sử dụng kĩ thuật client rendering.
Server side rendering
Client rendering
Khi trình duyệt gửi request nào lên server thì server sẽ trả về file html tương ứng. Ví dụ yêu cầu trang chủ thì trả về home.html, yêu cầu dashboard trả về dashboard.html.
Đã có sẵn một khuôn mẫu html (bare-bones HTML) rồi. Khi trình duyệt gửi request đến server, server sẽ chỉ trả về file .js thôi, trình duyệt tự lo phần của mình là load HTML bằng javascript
Mô hình hoạt động của server side rendering
Trang Niviki.com này được viết bằng Wordpress là kiểu server side rendering.
Ví dụ bạn vào trang chủ và mở Developer Tool lên, mở qua tab Elements, bạn sẽ thấy hết các thành phần HTML của toàn bộ trang như các thẻ , , ,vv
Mô hình hoạt động của client side rendering
Ví dụ và link này và mở Dev Tool lên:
https://www.chotot.com/tp-ho-chi-minh/quan-1/mua-ban
Bạn sẽ không thấy các phần HTML đâu hết, mà chỉ thấy một file js.
Bạn sẽ thấy đường dẫn của nó, hiện đang là relative path ( /chotot/dist/main-b0d1ab4d956769ac591bfb9369494933a67e9a33.js ), bạn thêm doamin chotot.com/ vô để xem nhé:
https://www.chotot.com/chotot/dist/main-b0d1ab4d956769ac591bfb9369494933a67e9a33.js
Note: Có thể ChoTot nâng cấp phiên bản mới nên đường link sẽ khác, bạn tự tìm link để xem nhé
Bạn sẽ thấy một đống code. Khi trình duyệt tải đống code này về, dựa vào đống code này để load HTML cho phù hợp. Bạn sẽ nhận ra là khi vào bất kỳ đường dẫn nào ( url nào ) trên chotot.com, bạn cũng sẽ thấy file .js này.
đây là file js bạn sẽ thấy
Đó là lý do người ta gọi nó là Single Page Application. Chỉ cần load một lần, phần render HTML đã giao cho trình duyệt.
Ngoài lề chút, nhưng ở Việt Nam, Chợ Tốt là một trong những công ty áp dụng công nghệ web mới nhất như React, GraphQL, vv.
Xu thế lập trình web
Bây giờ SPA đang là xu thế. Website bây giờ không chỉ là web tin tức, mua hàng đơn thuần nữa. Người ta muốn real time, mua hàng kiểu customer to customer, chat chít, và hàng tá xử lý khác.
Bạn có thể xem biểu đồ dưới đây để thấy rõ sự khác biệt
Đương nhiên chuyện so sánh giữa server render và single page application tốn rất nhiều thời gian, cái nào nhanh hơn, cái nào tốt hơn còn tùy vào mục đích website, cách cài đặt, cách code nữa. Mình sẽ nói đến vấn đề này sau nhé.
Tại sao xài webpack
Như bạn thấy với SPA, việc phải viết nhiều code Javascript ở phía client là điều tất yếu, và ta không thể viết tất cả một ứng dụng web phức tạp chỉ trong một hay vài file được.
Ta phải chia nhỏ ra từng phần, từng module. Mà đã chia nhỏ thì làm sao lúc chạy hay deploy những file này có thể gắn kết lại, hoạt động một cách trơn tru. Đây là lý do chúng ta cần webpack.
Kết
Hiểu được tại sao luôn là câu hỏi cần đầu tiên, một khi đã hiểu tại sao cần xài webpack, bạn sẽ không còn cảm giác cài để xài chứ cũng không hiểu gì.
Nguồn tham khảo:
https://medium.freecodecamp.org/heres-why-client-side-rendering-won-46a349fadb52
https://elixirforum.com/t/thoughts-about-single-page-applications/865
https://www.reddit.com/r/webdev/comments/69rt71/advantages_of_serverside_rendering_vs_clientside/
Related Posts
Discover more content you might enjoy
Nhập môn React: Học React ở đâu?
Bài viết chia sẻ kinh nghiệm học React từ góc nhìn của một lập trình viên iOS, giới thiệu các tài nguyên học tập như create-react-app, tài liệu chính thức, và các khóa học trực tuyến. Tác giả cũng đánh giá các khóa học React trên Udemy và các nền tảng khác, giúp người mới bắt đầu có lộ trình học tập hiệu quả.
Vibe Coding - Code lại blog từ đầu và rebrand thành khoa.blog
Chia sẻ chi tiết quá trình build lại blog từ đầu với vibe coding, từ việc chuyển đổi dữ liệu đến việc triển khai các tính năng mới, giúp người đọc hiểu rõ hơn về quá trình phát triển blog cá nhân.
Game Theory trong thời đại AI: Khi máy móc tham gia vào "trò chơi"
Bài viết phân tích sự giao thoa giữa lý thuyết trò chơi (Game Theory) và trí tuệ nhân tạo, giải thích cách AI đang thay đổi các nguyên lý cân bằng Nash và chiến lược tối ưu. Tác giả đưa ra các ví dụ thực tế về ứng dụng trong kinh doanh, giao thông và an ninh mạng.
Bài này không phải AI viết
Suy ngẫm chân thành về giá trị của việc viết thủ công trong kỷ nguyên AI. Dù AI có thể tạo nội dung hiệu quả, bài viết này là lời khẳng định về sự kết nối cá nhân và giá trị độc đáo mà con người mang lại cho văn bản của mình.
Review 4 tháng tìm ý nghĩa cuộc sống ở Đà Lạt
Bài viết chia sẻ trải nghiệm sống và làm việc tại Đà Lạt trong 4 tháng theo lối sống Digital Nomad. Tác giả chia sẻ về chi phí nhà ở, công việc từ xa, lịch làm việc 4 giờ mỗi ngày, và những sở thích mới phát triển như trượt ván, tập gym, bơi lội và học piano. Bài viết phù hợp cho những ai đang muốn thử nghiệm cuộc sống ở Đà Lạt hoặc tìm kiếm cân bằng giữa công việc và cuộc sống cá nhân.
3000 từ tiếng Anh thông dụng
Bài viết giới thiệu về tầm quan trọng của 3000 từ tiếng Anh thông dụng nhất, giúp người học có thể hiểu được 95% nội dung tiếng Anh trong các tình huống thông thường.