Làm cách nào để tìm hiểu xem mã javascript nhất định có thực sự được sử dụng không?

Question

Tôi đang thực hiện một số công việc dọn dẹp JavaScript trên một dự án kế thừa và cố gắng loại bỏ các thư viện JS dư thừa. Tôi đã làm tất cả những điều hiển nhiên (những thứ không phải là tài liệu tham khảo từ bất kỳ đâu cả). Nhưng có một số tệp JS được bao gồm trong tất cả các trang (qua các ô).

Làm cách nào để tìm hiểu xem chúng có thực sự được sử dụng, thiếu nội dung của mỗi và tìm kiếm từng chức năng trong chúng không? Có cách nào thông minh hơn/dễ dàng hơn để thực hiện việc này không? Đó là một dự án dựa trên java/Spring nếu giúp bằng cách này.

Answer 1

Tôi nghĩ rằng không có cách nào dễ dàng.

Bạn có thể xóa tham chiếu tập lệnh, chạy trang web của bạn bằng trình gỡ rối trình duyệt được bật và xem có lỗi "không tìm thấy chức năng" hay không.

Nhưng bạn sẽ phải kiểm tra tất cả các chức năng duy nhất trong trang web của bạn ...

Edit:

Bây giờ có một tính năng trong công cụ chrome dev có thể làm điều này cho bạn:

https://developers.google.com/web/updates/2017/04/devtools-release-notes

1) Mở menu lệnh. 2) Bắt đầu nhập Mức độ phù hợp và chọn Hiển thị mức độ phù hợp.

Answer 2

Tôi khuyên bạn nên sử dụng gián điệp cho tác vụ này. Chúng được sử dụng trong TDD để kiểm tra xem các hàm có được gọi hay không, do đó người ta có thể xác nhận xem các cuộc gọi có thực sự xảy ra hay không.

Nếu bạn đủ may mắn, các thư viện js được khởi tạo trong một hàm tạo hoặc theo một cách khác, nếu vậy tôi khuyên bạn nên theo dõi các hàm init này.
Nếu không, bạn có thể muốn theo dõi tất cả các chức năng, nhưng điều này rất đau đớn, đặc biệt là nếu bạn có các thư viện lớn, trong trường hợp đó tôi sẽ đề nghị đi từng cái một.

Trong quá khứ tôi đã sử dụng Jasmine hoặc Sinon.JS cho nhiệm vụ này, sau một ví dụ:

it('should be able to login', function() { 
    spyOn(authobj, 'isEmpty'); 
    authobj.login('abc', 'abc'); 
    expect(authobj.isEmpty).toHaveBeenCalled(); 
}); 

Một khi bạn đã thiết lập gián điệp về chức năng thích hợp sau đó nó phải chỉ là vấn đề kiểm tra nếu họ được gọi hay không, bạn có thể thực hiện cuộc gọi đến mixpanel (ví dụ đầu tiên đến với tâm trí) với một số thông tin về nó, để sau này bạn có thể thấy những chức năng nào được gọi và cái gì không.

Answer 3

Một trong những bản cập nhật mới nhất từ ​​công cụ chrome dev hiện bao gồm tab phủ sóng JS và CSS cho phép bạn xem mã không sử dụng của mình.

https://developers.google.com/web/updates/2017/04/devtools-release-notes

1) Open the Command Menu. 
2) Start typing Coverage and select Show Coverage. 

Answer 4

Bạn cũng có thể cung cấp cho một cố gắng để purifycss.

CLI usage:

$ npm install -g purify-css 

purifycss <css> <content> [option] 

Options: 
    -m, --min  Minify CSS       [boolean] [default: false] 
    -o, --out  Filepath to write purified css to     [string] 
    -i, --info  Logs info on how much css was removed 
                 [boolean] [default: false] 
    -r, --rejected Logs the CSS rules that were removed 
                 [boolean] [default: false] 
    -w, --whitelist List of classes that should not be removed 
                  [array] [default: []] 
    -h, --help  Show help           [boolean] 
    -v, --version Show version number         [boolean]