Tối ưu hiệu năng web

Question

Cho mình trong hỏi project mình build bằng nuxtjs chấmpagespeed Googlebáo tối ưu thế này thì xử lý thế nào ạ?

Answer

Như nó đã viết bạn hãy bỏ những js không dùng tới để giảm dung lượng js. Không còn cách nào khác cả.
 
1. Giảm import không dùng đến

Ví dụ: 1 thư viện hỗ trợ có 100 function nhưng b chủ sử dụng 1~2 hàm thì hãy chỉ import 1~2 hàm đó vào trong app của bạn. ví dụ dưới đây b sẽ rõ.
 
```
import lib from &#x27;sample-lib&#x27;

lib.fncA()...

// != 
import { fncA, funcB } from  &#x27;sample-lib&#x27;

fncA()
```

2. phân chia ra file nhỏ hơn để giảm dung lượng 1 file xuống

thay vì tải 1 file 5mb thì hãy chia ra có thể là 5 file 1mb chẳng hạn, vì trình duyệt sẽ tải 5 luồng sẽ nhanh hơn.

3. sử dụng cdn để giảm dung lượng file của bạn.

ví dụ với những thư viện phổ thông kiểu jquery thì nên dùng cdn sẽ tốt hơn.

Ngoài ra đây chỉ mang tính chất tham khảo, đừng quá tin vào nó hay cố gắng để đạt 100đ. Tốn time mà không hiệu quả, tầm 9x điểm là đã okie rồi.

Answer

Unused javascript code là những đoạn code javascript mà có được tải cùng với trang nhưng lại không được thực thi. Nguyên do thì có khá nhiều, nhưng bạn có thể vào bài viết [Remove unused JavaScript](https://web.dev/unused-javascript/) ở trên web.dev để đọc.

Một nguyên do phổ biến của cái này mà có thể trong trường hợp của bạn mắc phải là do project sử dụng kèm theo thư viện ngoài nhưng lại import full chức năng của nó mà bạn không dùng đến. Ví dụ với package `lodash`, nếu import tất cả các function của nó mà chỉ dùng duy nhất có một function:

```javascript
import _ from &#x27;lodash&#x27;
...
_.groupBy(...)
```
Thì bạn sẽ gây ra có code dư thừa không sử dụng trong lúc tải trang. Thay vào đó, bạn chỉ nên import những thứ bạn có sử dụng thôi:

```javascript
import groupBy from &#x27;lodash/groupBy&#x27;
...
groupBy(...)
```

Ngoài ra, có thể bạn dùng cả những library khá nặng mà không hỗ trợ code splitting, thì bạn nên tìm những thư viện thay thế nhẹ hơn để dùng. Ví dụ, package `dayjs` có thể thay thế cho `moment`.

Bạn có thể nhận biết lỗi này trong project khá dễ bằng cách dùng công cụ webpack-bundle-analyzer. Nuxt có hỗ trợ sẵn nó nếu bạn chạy lệnh `nuxt build --analyze`.

2 CÂU TRẢ LỜI