Browserslist la gì

Danh sách trình duyệt

Bạn sẽ thấy một trườngbrowserslisttrongpackage.json(hoặc một tệp.browserslistrcriêng biệt) chỉ định một loạt các trình duyệt mà dự án đang nhắm mục tiêu.Giá trị này sẽ được@babel/preset-envvàautoprefixer sử dụngđể tự động xác định các tính năng JavaScript cần được chuyển đổi và tiền tố của nhà cung cấp CSS cần thiết.

Xemở đâyđể biết cách chỉ định phạm vi trình duyệt.

Polyfill

Một dự án Vue CLI mặc định sử dụng@ vue / babel-preset-app, sử dụng@babel/preset-envvà cấu hìnhbrowserslistđể xác định các Polyfillcần thiết cho dự án của bạn.

#useBuiltIns: 'usage'

Theo mặc định, nósẽtruyềnuseBuiltIns: 'usage'tới@babel/preset-envnhằmtự động phát hiện các polyfillcần thiết dựa trên các tính năng ngôn ngữ được sử dụng trong mã nguồn của bạn.Điều này đảm bảo chỉ có số lượng tối thiểu các polyfillđược đưa vàotrong gói cuối cùng của bạn.Tuy nhiên, điều này cũng có nghĩa lànếu một trong các phụ thuộc của bạn có các yêu cầu cụ thể về các polyfills, theo mặc định, Babel sẽ không thể phát hiện ra nó.

Nếu một trong các phụ thuộc của bạn cần các polyfill, bạn có một vài tùy chọn:

Nếu dependencyđược viết trong một phiên bản ES mà môi trường đích của bạn không hỗ trợ:Thêm dependencyđó vào tùy chọntranspileDependenciestrongvue.config.js.Điều này sẽ cho phép cả chuyển đổi cú pháp và phát hiện polyfilldựa trên sử dụng cho dependencyđó.

Nếu phụ thuộc gửi mã ES5 và liệt kê rõ ràng các polyfillcần thiết:bạn có thể đưa các polyfill cần thiết bằng cách sử dụngtùy chọnpolyfillscho@vue/babel-preset-app.Lưu ý rằnges6.promiseđược đưa vàotheo mặc định bởi vì nó rất phổ biến cho cáclib phụ thuộc vào cácPromise. // babel.config.js module.exports = { presets: [ ['@vue/app', { polyfills: [ 'es6.promise', 'es6.symbol' ] }] ] }

Gợi ý
Bạn nên thêm polyfilltheo cách này thay vì nhập trực tiếp chúng vào mã nguồn của bạn, vì các polyfills được liệt kê ở đây có thể tự động bị loại trừ nếubrowserslistmục tiêucủa bạnkhông cần chúng.

Nếu dependency gửi mã ES5nhưng sử dụng các tính năng ES6+ mà không liệt kê các yêu cầu polyfill một cách rõ ràng (ví dụ: Vuetify):Sử dụnguseBuiltIns: 'entry'và sau đó thêmimport '@babel/polyfill'vào tệp mục nhập của bạn.Thao tác này sẽ nhậptất cả cácpolyfills dựa trên cácbrowserslistmục tiêucủa bạnđể bạn không cần phải lo lắng về các polyfile phụ thuộc nữa, nhưng có khả năng sẽ tăng kích thước gói cuối cùng của bạn với một số polyfillkhông sử dụng.

Xemtài liệu @babel-preset/envđể biết thêm chi tiết.

#Polyfillkhi Xây dựng dưới dạng Thư viện hoặc Thành phần Web

Khi sử dụng Vue CLI đểxây dựng một thư viện hoặc các thành phần Web, bạn nên chuyểnuseBuiltIns: falsesang@vue/babel-preset-appđể vô hiệu hóa tính năng chèn polyfill tự động.Điều này đảm bảo không chứacác polyfillkhông cần thiết trong mã của bạn, vì nó phải là trách nhiệm của ứng dụng tiêu thụ để bao gồm các polyfill.

Chế độ hiện đại

Với Babel, chúng ta có thể tận dụng tất cả các tính năng ngôn ngữ mới nhất trong ES2015+, nhưng điều đó cũng có nghĩa là chúng ta phải gửi các gói được nhúng và xếp chồng để hỗ trợ các trình duyệt cũ hơn.Các gói transpiled này thường dài hơn so với mã ES2015+ gốc, và cũng phân tích cú pháp và chạy chậm hơn.Cho rằng ngày nay phần lớn các trình duyệt hiện đại có hỗ trợ khá tốt cho ES2015 bản địa, chúng ta phải gửi mã nặng hơn và kém hiệu quả hơn cho các trình duyệt đó chỉ vì chúng ta phải hỗ trợ các trình duyệt cũ hơn.

Vue CLI cung cấp một "Chế độ hiện đại" để giúp bạn giải quyết vấn đề này.Khi xây dựng bản production ta dùnglệnh sau: vue-cli-service build --modern

Vue CLI sẽ sản xuất hai phiên bản ứng dụng của bạn: một gói hiện đại nhắm mục tiêu các trình duyệt hiện đại hỗ trợcác mô đun ESvà một gói cũ nhắm mục tiêu các trình duyệt cũ hơn.

Tuy nhiên, điềuthú vị là không có yêu cầu triển khai đặc biệt nào.Tệp HTML được tạo tự động sử dụng các kỹ thuật được thảo luận trongbài đăng tuyệt vời của Phillip Walton:

Gói hiện đại được tải<script type="module">trong các trình duyệt hỗ trợ nó;chúng cũng được tải sẵn bằng cách sử dụng<link rel="modulepreload">thay thế.

Gói cũ được tải xuống<script nomodule>, được bỏ qua bởi các trình duyệt hỗ trợ các mô-đun ES.

Bản sửa lỗi choSafari 10<script nomodule> cũng được tự động tiêm.

Đối với ứng dụng Hello World, gói hiện đại đã nhỏ hơn 16%.Trong bản production, gói hiện đại thường sẽ dẫn đến phân tích và đánh giá nhanh hơn đáng kể, cải thiện hiệu suất tải của ứng dụng.

Gợi ý
<script type="module"> được nạpvới CORS luôn được bật.Điều này có nghĩa là máy chủ của bạn phải trả về các tiêu đề CORS hợp lệ nhưAccess-Control-Allow-Origin: *.Nếu bạn muốn tìm nạp tập lệnh bằng thông tin đăng nhập, hãy đặttùy chọncrossoriginthànhuse-credentials.
Ngoài ra, chế độ hiện đại sử dụng tập lệnh nội tuyến để tránh Safari 10 tải cả hai gói, vì vậy nếu bạn đang sử dụng CSP nghiêm ngặt, bạn sẽ cần cho phép kịch bản lệnh nội tuyến rõ ràng bằng:Content-Security-Policy: script-src 'self' 'sha256-4RS22DYeB7U14dra4KcQYxmwt5HkOInieXK1NUMBmQI='

Video liên quan