VueJS: Khả năng tương thích trình duyệt

Danh sách trình duyệt

Bạn sẽ thấy một trường browserslist trong package.json (hoặc một tệp .browserslistrc riê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-env và 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-env và cấu hình browserslist để xác định các Polyfill cần thiết cho dự án của bạn.

#useBuiltIns: 'usage'

Theo mặc định, nó sẽ  truyền useBuiltIns: 'usage' tới @babel/preset-env nhằm tự động phát hiện các polyfill cầ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ào trong 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:

1. 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ọn transpileDependencies trong vue.config.js. Điều này sẽ cho phép cả chuyển đổi cú pháp và phát hiện polyfill dựa trên sử dụng cho dependency đó.

2. Nếu phụ thuộc gửi mã ES5 và liệt kê rõ ràng các polyfill cần thiết: bạn có thể đưa các polyfill cần thiết bằng cách sử dụng tùy chọn polyfills cho @vue/babel-preset-app. Lưu ý rằng es6.promise được đưa vào theo mặc định bởi vì nó rất phổ biến cho các lib phụ thuộc vào các Promise.

   // babel.config.js
   module.exports = {
     presets: [
       ['@vue/app', {
         polyfills: [
           'es6.promise',
           'es6.symbol'
         ]
       }]
     ]
   }
   

   Gợi ý

   Bạn nên thêm polyfill theo 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ếu browserslist mục tiêu của bạn không cần chúng.

3. Nếu dependency gửi mã ES5 như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ụng useBuiltIns: 'entry' và sau đó thêm import '@babel/polyfill' vào tệp mục nhập của bạn. Thao tác này sẽ nhập tất cả các polyfills dựa trên các browserslist mục tiêu củ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ố polyfill không sử dụng.

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

#Polyfill khi 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ển useBuiltIns: false sang @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ứa các polyfill khô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ùng lệ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 ES và một gói cũ nhắm mục tiêu các trình duyệt cũ hơn.

Tuy nhiên, điều thú 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 trong bà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 cho Safari 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ạp vớ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 đặt tùy chọn crossorigin thành use-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='