Giới thiệu
Khi xây dựng một ứng dụng Front-End với Vue 3, TypeScript và Tailwind CSS, kích thước bundle cuối cùng ảnh hưởng trực tiếp đến thời gian tải trang và trải nghiệm người dùng. Bài viết này sẽ chia sẻ các kỹ thuật thực tế giúp giảm đáng kể dung lượng tải về mà không làm mất tính năng.
1. Sử dụng Tree‑shaking và tối ưu hoá cấu hình Vite
Vite, công cụ build mặc định cho Vue 3, hỗ trợ tree‑shaking tự động. Để khai thác tối đa, bạn cần cấu hình optimizeDeps và build.rollupOptions một cách chính xác.
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
export default defineConfig({
plugins: [vue()],
build: {
target: 'es2015',
minify: 'esbuild',
rollupOptions: {
output: {
manualChunks(id) {
if (id.includes('node_modules')) {
// Tách các thư viện lớn thành các chunk riêng
return id.toString().split('node_modules/')[1].split('/')[0];
}
},
},
},
},
});2. Lazy Loading Component với Dynamic Import
Thay vì import toàn bộ component trong thời điểm khởi tạo, bạn có thể tải chúng khi cần thiết bằng defineAsyncComponent hoặc import() trực tiếp.
import { defineAsyncComponent } from 'vue';
const UserProfile = defineAsyncComponent(() =>
import('@/components/UserProfile.vue')
);
export default {
components: { UserProfile },
};Với cách này, mỗi route chỉ tải những component liên quan, giảm kích thước bundle ban đầu.
3. Cấu hình PurgeCSS trong Tailwind
Tailwind sinh ra hàng ngàn lớp CSS, nhưng không phải tất cả đều được sử dụng. Sử dụng purge (hoặc content trong Tailwind 3) để loại bỏ các lớp không cần.
module.exports = {
content: [
'./index.html',
'./src/**/*.{vue,js,ts,jsx,tsx}',
],
theme: {
extend: {},
},
plugins: [],
};4. Tối ưu hoá CSS với PostCSS và CSSnano
Thêm plugin cssnano vào pipeline PostCSS để minify CSS sau khi Tailwind đã purge.
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
cssnano: { preset: 'default' },
},
};5. Kiểm tra kích thước bundle thực tế
Sau khi cấu hình, hãy chạy lệnh build và kiểm tra kết quả:
npm run build # Hoặc nếu dùng yarn yarn build
Sử dụng công cụ Lighthouse hoặc Bundlephobia để đo kích thước và thời gian tải.
Kết luận
Áp dụng các bước trên sẽ giúp giảm đáng kể kích thước bundle, cải thiện tốc độ tải và tối ưu trải nghiệm người dùng. Để nắm vững toàn bộ quy trình và có các ví dụ thực tế hơn, bạn có thể Tham khảo khóa học "Lập trình Front-End với VueJS Framework" tại đây.
.png)
