làm thế nào để xác nhận nếu cây lắc đang làm việc với Webpack 2?

Question

Tôi vừa cập nhật xong ứng dụng phản hồi của mình từ webpack 1 lên webpack 2. Tuy nhiên, kích thước gói của tôi tăng thêm ~ 30Kb. Tôi đã hy vọng kích thước gói sẽ giảm, Làm thế nào tôi có thể xác nhận rằng cây lắc làm việc. Và tại sao lại tăng?

Answer 1

Có một vài bước bạn có thể thực hiện:

1. tắt việc rút gọn/làm xấu đi
2. comments chèn vào một số chức năng bạn biết là không sử dụng
3. kiểm tra đầu ra để xem những ý kiến ​​đang có hoặc không

Webpack cũng có thể hiển thị cho bạn kích thước của từng mô-đun/gói nhập. Ví dụ, tại nơi làm việc, chúng tôi có một gói bao gồm cả lodash và gạch dưới vì một trong các thư viện mà chúng tôi đang sử dụng yêu cầu mỗi thư viện; webpack rõ ràng cho thấy có bao nhiêu kilobyte từng gói cho biết thêm:

Bạn sẽ có thể nhìn thấy từ này, nơi sự gia tăng kích thước là đến từ.

Answer 2

TL; DR: Kể từ phiên bản 2.3, webpack không có bất kỳ sự rung lắc nào của cây. Nó chỉ sử dụng UglifyJS để loại bỏ mã không sử dụng.

---

Trước tiên, chúng ta phải xác định cây lắc là gì.

• Stackoverflow định nghĩa nó là "thuật toán xóa mã chết cho javascript hiện đại".

• Gói web làm rõ rằng nó dựa vào nhập/xuất mô-đun ES2015 cho cấu trúc tĩnh của hệ thống mô-đun của nó.

• Rollup (ban đầu được phổ biến rộng rãi trong thuật ngữ) cũng có giải thích tương tự.

Vì vậy, chúng tôi có thể suy ra một định nghĩa cụ thể: loại trừ tĩnh của các mô-đun ES không được sử dụng.

Bây giờ, chúng ta hãy xem những giai đoạn chuyển đổi mỗi module thường có:

• babel-loader được đưa một điểm mấu chốt mà là một tập tin javascript trong một số định dạng module. Babel có thể chuyển đổi sang định dạng mô-đun khác để giữ nguyên định dạng (module: false)
• gói web sẽ phân tích cú pháp tệp tĩnh và tìm mô-đun đã nhập (sử dụng một số loại regexp). không biến dạng nó) hoặc thêm một số hàm bao (đối với mô-đun commonjs)
• mô-đun đã nhập trở thành điểm vào và chuyển đến bộ nạp babel
• sau khi tất cả các mô-đun được tải và chuyển đổi, uglify sẽ xử lý kết quả và xóa mã không sử dụng (unused: true)

Bây giờ, chúng ta có thể thấy rằng mặc dù uglify có thể loại bỏ các xuất khẩu không sử dụng nhưng nó không thực sự dựa vào cú pháp mô-đun ES.Nó chỉ là một loại bỏ mã đích cho mục đích chung để nó không thể được định nghĩa là "Cây lắc".

Vậy làm cách nào để chúng tôi có thể xác nhận liệu webpack có lắc cây không?

• Trước hết, tất cả mã phải ở định dạng mô-đun ES.
• Vì nó đã được đề cập trong một câu trả lời khác, chúng ta phải vô hiệu hóa Uglify.
• Chúng tôi cũng phải tắt chuyển đổi mô-đun của babel vì chúng tôi không thể biết liệu một mô-đun có được sử dụng ở giai đoạn đó hay không.

Và bây giờ nếu webpack thực sự thực hiện một cây lắc thuật toán chúng ta có thể khẳng định nó bằng cách nhìn vào kích thước bó của điểm cụm từ này:

import { keyBy } from 'lodash-es'; // lodash is in ES module format 

console.log(keyBy([{ key: 'value' }], 'key')); 

Nếu webpack không có cây lắc kết quả nên được hàng chục kilobyte. Nếu nó không phải là một nửa megabyte trở lên.