hộp công việc-webpack-plugin

Workbox cung cấp 2 trình bổ trợ webpack: một trình bổ trợ tạo trình chạy dịch vụ hoàn chỉnh cho bạn và trình bổ trợ tạo ra danh sách các thành phần để lưu vào bộ nhớ đệm trước rồi chèn vào tệp trình chạy dịch vụ.

Các trình bổ trợ được triển khai dưới dạng hai lớp trong mô-đun workbox-webpack-plugin, có tên là GenerateSW và InjectManifest. Câu trả lời cho các câu hỏi sau đây có thể giúp bạn chọn trình bổ trợ và cấu hình phù hợp để sử dụng.

Trình bổ trợ nào nên sử dụng

GenerateSW

Trình bổ trợ GenerateSW sẽ tạo một tệp worker cho bạn và thêm tệp đó vào quy trình tài sản webpack.

Trường hợp sử dụng GenerateSW

  • Bạn muốn lưu trước các tệp trong bộ nhớ đệm.
  • Bạn có nhu cầu lưu vào bộ nhớ đệm thời gian chạy đơn giản.

Trường hợp KHÔNG nên sử dụng GenerateSW

  • Bạn muốn sử dụng các tính năng khác của Worker dịch vụ (tức là Web Push).
  • Bạn muốn nhập thêm tập lệnh hoặc thêm logic cho các chiến lược lưu vào bộ nhớ đệm tuỳ chỉnh.

InjectManifest

Trình bổ trợ InjectManifest sẽ tạo một danh sách URL để lưu vào bộ nhớ đệm trước và thêm tệp kê khai lưu vào bộ nhớ đệm trước đó vào tệp worker dịch vụ hiện có. Nếu không, tệp sẽ giữ nguyên trạng thái.

Trường hợp sử dụng InjectManifest

  • Bạn muốn có nhiều quyền kiểm soát hơn đối với trình chạy dịch vụ của mình.
  • Bạn muốn lưu các tệp vào bộ nhớ đệm trước.
  • Bạn cần tuỳ chỉnh định tuyến và chiến lược.
  • Bạn muốn sử dụng worker dịch vụ với các tính năng khác của nền tảng (ví dụ: Web Push).

Trường hợp KHÔNG nên sử dụng InjectManifest

  • Bạn muốn biết cách dễ nhất để thêm trình chạy dịch vụ vào trang web của mình.

Trình bổ trợ GenerateSW

Bạn có thể thêm trình bổ trợ GenerateSW vào cấu hình webpack như sau:

// Inside of webpack.config.js:
const {GenerateSW} = require('workbox-webpack-plugin');

module.exports = {
  // Other webpack config...
  plugins: [
    // Other plugins...
    new GenerateSW({
      // These are some common options, and not all are required.
      // Consult the docs for more info.
      exclude: [/.../, '...'],
      maximumFileSizeToCacheInBytes: ...,
      navigateFallback: '...',
      runtimeCaching: [{
        // Routing via a matchCallback function:
        urlPattern: ({request, url}) => ...,
        handler: '...',
        options: {
          cacheName: '...',
          expiration: {
            maxEntries: ...,
          },
        },
      }, {
        // Routing via a RegExp:
        urlPattern: new RegExp('...'),
        handler: '...',
        options: {
          cacheName: '...',
          plugins: [..., ...],
        },
      }],
      skipWaiting: ...,
    }),
  ],
};

Thao tác này sẽ tạo một trình chạy dịch vụ có chế độ thiết lập lưu trước vào bộ nhớ đệm cho tất cả thành phần webpack do cấu hình của bạn chọn, cũng như các quy tắc lưu vào bộ nhớ đệm trong thời gian chạy đã cung cấp.

Bạn có thể tìm thấy tập hợp đầy đủ các lựa chọn cấu hình trong tài liệu tham khảo.

Trình bổ trợ InjectManifest

Bạn có thể thêm trình bổ trợ InjectManifest vào cấu hình webpack như sau:

// Inside of webpack.config.js:
const {InjectManifest} = require('workbox-webpack-plugin');

module.exports = {
  // Other webpack config...
  plugins: [
    // Other plugins...
    new InjectManifest({
      // These are some common options, and not all are required.
      // Consult the docs for more info.
      exclude: [/.../, '...'],
      maximumFileSizeToCacheInBytes: ...,
      swSrc: '...',
    }),
  ],
};

Thao tác này sẽ tạo một tệp kê khai trước trong bộ nhớ đệm dựa trên nội dung webpack do cấu hình của bạn chọn và đưa vào tệp trình chạy dịch vụ được đóng gói và biên dịch.

Bạn có thể xem bộ tuỳ chọn cấu hình đầy đủ trong tài liệu tham khảo.

Thông tin bổ sung

Bạn có thể xem hướng dẫn về cách sử dụng các trình bổ trợ trong ngữ cảnh bản dựng webpack lớn hơn ở phần "Ứng dụng web tiến bộ" của tài liệu về gói web.

Loại

GenerateSW

Lớp này hỗ trợ việc tạo một tệp trình chạy dịch vụ mới, sẵn sàng sử dụng trong quá trình biên dịch webpack.

Sử dụng một thực thể của GenerateSW trong mảng plugins của cấu hình gói web.

// The following lists some common options; see the rest of the documentation
// for the full set of options and defaults.
new GenerateSW({
  exclude: [/.../, '...'],
  maximumFileSizeToCacheInBytes: ...,
  navigateFallback: '...',
  runtimeCaching: [{
    // Routing via a matchCallback function:
    urlPattern: ({request, url}) => ...,
    handler: '...',
    options: {
      cacheName: '...',
      expiration: {
        maxEntries: ...,
      },
    },
  }, {
    // Routing via a RegExp:
    urlPattern: new RegExp('...'),
    handler: '...',
    options: {
      cacheName: '...',
      plugins: [..., ...],
    },
  }],
  skipWaiting: ...,
});

Thuộc tính

GenerateSWConfig

Thuộc tính

  • additionalManifestEntries

    (string | ManifestEntry)[] không bắt buộc

    Danh sách các mục cần được lưu vào bộ nhớ đệm trước, ngoài mọi mục được tạo trong cấu hình bản dựng.

  • babelPresetEnvTargets

    string[] không bắt buộc

    Giá trị mặc định là: ["chrome >= 56"]

    Các mục tiêu cần truyền đến babel-preset-env khi chuyển đổi gói trình chạy dịch vụ.

  • cacheId

    chuỗi không bắt buộc

    Mã nhận dạng không bắt buộc để thêm vào trước tên bộ nhớ đệm. Điều này chủ yếu hữu ích cho việc phát triển cục bộ, trong đó nhiều trang web có thể được phân phát từ cùng một nguồn gốc http://localhost:port.

  • đoạn

    string[] không bắt buộc

    Một hoặc nhiều tên đoạn có tệp đầu ra tương ứng phải được đưa vào tệp kê khai bộ nhớ đệm trước.

  • cleanupOutdatedCaches

    boolean không bắt buộc

    Giá trị mặc định là: false

    Liệu Workbox có nên cố gắng xác định và xoá mọi bộ nhớ đệm trước tạo bằng các phiên bản cũ, không tương thích hay không.

  • clientsClaim

    boolean không bắt buộc

    Giá trị mặc định là: false

    Liệu worker dịch vụ có nên bắt đầu kiểm soát mọi ứng dụng hiện có ngay khi kích hoạt hay không.

  • directoryIndex

    chuỗi không bắt buộc

    Nếu yêu cầu điều hướng cho một URL có đuôi là / không khớp với một URL được lưu vào bộ nhớ đệm trước, thì giá trị này sẽ được thêm vào URL và sẽ được kiểm tra để tìm kết quả khớp với bộ nhớ đệm trước. Bạn nên đặt giá trị này thành giá trị mà máy chủ web của bạn đang sử dụng cho chỉ mục thư mục.

  • disableDevLogs

    boolean không bắt buộc

    Giá trị mặc định là: false

  • dontCacheBustURLsMatching

    RegExp không bắt buộc

    Các thành phần khớp với URL này sẽ được giả định là có phiên bản riêng biệt thông qua URL của chúng và được miễn khỏi việc huỷ bộ nhớ đệm HTTP thông thường được thực hiện khi điền sẵn bộ nhớ đệm. Mặc dù không bắt buộc, nhưng nếu quy trình xây dựng hiện có đã chèn giá trị [hash] vào từng tên tệp, thì bạn nên cung cấp RegExp giúp phát hiện điều đó, vì điều này sẽ làm giảm mức băng thông tiêu thụ khi lưu vào bộ nhớ đệm.

  • loại trừ

    (string | RegExp | function)[] không bắt buộc

    Một hoặc nhiều chỉ định dùng để loại trừ các thành phần khỏi tệp kê khai bộ nhớ đệm trước. Giá trị này được diễn giải theo các quy tắc tương tự như tuỳ chọn exclude tiêu chuẩn của webpack. Nếu bạn không cung cấp, giá trị mặc định sẽ là [/\.map$/, /^manifest.*\.js$].

  • excludeChunks

    string[] không bắt buộc

    Một hoặc nhiều tên đoạn có tệp đầu ra tương ứng sẽ bị loại trừ khỏi tệp kê khai bộ nhớ đệm trước.

  • ignoreURLParametersMatching

    RegExp[] không bắt buộc

    Mọi tên thông số tìm kiếm khớp với một trong các RegExp trong mảng này sẽ bị xoá trước khi tìm kết quả trùng khớp trong bộ nhớ đệm trước. Điều này sẽ hữu ích nếu người dùng có thể yêu cầu các URL chứa, ví dụ: các tham số URL dùng để theo dõi nguồn lưu lượng truy cập. Nếu bạn không cung cấp, giá trị mặc định sẽ là [/^utm_/, /^fbclid$/].

  • importScripts

    string[] không bắt buộc

    Danh sách các tệp JavaScript cần được truyền đến importScripts() bên trong tệp worker được tạo. Điều này rất hữu ích khi bạn muốn Workbox tạo tệp worker cấp cao nhất, nhưng muốn thêm một số mã bổ sung, chẳng hạn như trình nghe sự kiện đẩy.

  • importScriptsViaChunks

    string[] không bắt buộc

    Một hoặc nhiều tên của các phần webpack. Nội dung của các phần đó sẽ được đưa vào worker dịch vụ được tạo, thông qua lệnh gọi đến importScripts().

  • bao gồm

    (string | RegExp | function)[] không bắt buộc

    Một hoặc nhiều chỉ định dùng để đưa các thành phần vào tệp kê khai bộ nhớ đệm trước. Giá trị này được diễn giải theo các quy tắc tương tự như tuỳ chọn include tiêu chuẩn của webpack.

  • inlineWorkboxRuntime

    boolean không bắt buộc

    Giá trị mặc định là: false

    Liệu mã thời gian chạy cho thư viện Workbox có được đưa vào trình chạy dịch vụ cấp cao nhất hay không, hoặc được chia thành một tệp riêng cần được triển khai cùng với trình chạy dịch vụ. Việc tách biệt thời gian chạy có nghĩa là người dùng sẽ không phải tải lại mã Workbox mỗi khi trình chạy dịch vụ cấp cao nhất của bạn thay đổi.

  • manifestEntries

    ManifestEntry[] không bắt buộc

  • manifestTransforms

    ManifestTransform[] không bắt buộc

    Một hoặc nhiều hàm sẽ được áp dụng tuần tự cho tệp kê khai đã tạo. Nếu bạn cũng chỉ định modifyURLPrefix hoặc dontCacheBustURLsMatching, thì các phép biến đổi tương ứng sẽ được áp dụng trước.

  • maximumFileSizeToCacheInBytes

    số không bắt buộc

    Giá trị mặc định là: 2097152

    Bạn có thể dùng giá trị này để xác định kích thước tối đa của các tệp sẽ được lưu vào bộ nhớ đệm trước. Điều này giúp bạn không vô tình lưu các tệp rất lớn vào bộ nhớ đệm trước, những tệp này có thể vô tình khớp với một trong các mẫu của bạn.

  • chế độ

    chuỗi không bắt buộc

    Nếu bạn đặt thành "production" (phiên bản chính thức), thì một gói worker dịch vụ được tối ưu hoá sẽ được tạo, trong đó không bao gồm thông tin gỡ lỗi. Nếu không được định cấu hình rõ ràng tại đây, giá trị mode được định cấu hình trong quá trình biên dịch webpack hiện tại sẽ được sử dụng.

  • modifyURLPrefix

    đối tượng không bắt buộc

    Một đối tượng ánh xạ tiền tố chuỗi đến các giá trị chuỗi thay thế. Ví dụ: bạn có thể sử dụng thuộc tính này để xoá hoặc thêm tiền tố đường dẫn từ một mục nhập tệp kê khai nếu chế độ thiết lập dịch vụ lưu trữ web của bạn không khớp với chế độ thiết lập hệ thống tệp trên máy. Để có một giải pháp thay thế linh hoạt hơn, bạn có thể sử dụng tuỳ chọn manifestTransforms và cung cấp một hàm sửa đổi các mục trong tệp kê khai bằng bất kỳ logic nào bạn cung cấp.

    Ví dụ về cách sử dụng:

    // Replace a '/dist/' prefix with '/', and also prepend
// '/static' to every URL.
modifyURLPrefix: {
  '/dist/': '/',
  '': '/static',
}
  • navigateFallback

    chuỗi không bắt buộc

    Giá trị mặc định là: null

    Nếu được chỉ định, tất cả yêu cầu điều hướng cho các URL không được lưu vào bộ nhớ đệm trước sẽ được thực hiện bằng HTML tại URL được cung cấp. Bạn phải truyền vào URL của một tài liệu HTML được liệt kê trong tệp kê khai lưu vào bộ nhớ đệm trước. Bạn nên sử dụng trong trường hợp Ứng dụng một trang, trong đó bạn muốn tất cả các thao tác điều hướng đều sử dụng HTML vỏ ứng dụng phổ biến.

  • navigateFallbackAllowlist

    RegExp[] không bắt buộc

    Một mảng biểu thức chính quy không bắt buộc, hạn chế những URL mà hành vi navigateFallback đã định cấu hình áp dụng. Điều này hữu ích nếu bạn chỉ coi một nhóm nhỏ URL của trang web là một phần của Ứng dụng một trang. Nếu bạn định cấu hình cả navigateFallbackDenylist và navigateFallbackAllowlist, thì danh sách từ chối sẽ được ưu tiên.

    Lưu ý: Các RegExp này có thể được đánh giá dựa trên mọi URL đích trong quá trình điều hướng. Hãy tránh sử dụng RegExps phức tạp, nếu không người dùng có thể gặp phải sự chậm trễ khi di chuyển trên trang web của bạn.

  • navigateFallbackDenylist

    RegExp[] không bắt buộc

    Một mảng biểu thức chính quy không bắt buộc hạn chế những URL mà hành vi navigateFallback đã định cấu hình áp dụng. Điều này rất hữu ích nếu bạn chỉ coi một nhóm nhỏ URL của trang web là một phần của Ứng dụng một trang. Nếu bạn định cấu hình cả navigateFallbackDenylist và navigateFallbackAllowlist, thì danh sách từ chối sẽ được ưu tiên.

    Lưu ý: Các RegExp này có thể được đánh giá dựa trên mọi URL đích trong quá trình điều hướng. Tránh sử dụng RegExp phức tạp, nếu không người dùng có thể gặp phải độ trễ khi điều hướng trên trang web của bạn.

  • navigationPreload

    boolean không bắt buộc

    Giá trị mặc định là: false

    Liệu có bật tính năng tải trước điều hướng trong worker dịch vụ đã tạo hay không. Khi đặt thành true, bạn cũng phải sử dụng runtimeCaching để thiết lập chiến lược phản hồi thích hợp sao cho khớp với các yêu cầu điều hướng và sử dụng phản hồi được tải trước.

  • offlineGoogleAnalytics

    boolean | GoogleAnalyticsInitializeOptions không bắt buộc

    Giá trị mặc định là: false

    Kiểm soát việc có bao gồm tính năng hỗ trợ cho Google Analytics ngoại tuyến hay không. Khi true, lệnh gọi đến initialize() của workbox-google-analytics sẽ được thêm vào worker dịch vụ đã tạo. Khi bạn đặt thành Object, đối tượng đó sẽ được chuyển vào lệnh gọi initialize(), cho phép bạn tuỳ chỉnh hành vi.

  • runtimeCaching

    RuntimeCaching[] không bắt buộc

    Khi sử dụng các công cụ bản dựng của Workbox để tạo trình chạy dịch vụ, bạn có thể chỉ định một hoặc nhiều cấu hình lưu vào bộ nhớ đệm trong thời gian chạy. Sau đó, các lệnh gọi này sẽ được dịch sang lệnh gọi workbox-routing.registerRoute bằng cách sử dụng cấu hình trình xử lý và khớp mà bạn xác định.

    Để biết tất cả các tuỳ chọn, hãy xem tài liệu về workbox-build.RuntimeCaching. Ví dụ bên dưới là một cấu hình thông thường, với 2 tuyến thời gian chạy được xác định:

  • skipWaiting

    boolean không bắt buộc

    Giá trị mặc định là: false

    Liệu có thêm lệnh gọi vô điều kiện vào skipWaiting() vào trình chạy dịch vụ đã tạo hay không. Nếu là false, thì trình nghe message sẽ được thêm vào, cho phép các trang ứng dụng kích hoạt skipWaiting() bằng cách gọi postMessage({type: 'SKIP_WAITING'}) trên một worker dịch vụ đang chờ.

  • bản đồ nguồn

    boolean không bắt buộc

    Giá trị mặc định là: true

    Liệu có tạo sơ đồ nguồn cho các tệp trình chạy dịch vụ đã tạo hay không.

  • swDest

    chuỗi không bắt buộc

    Giá trị mặc định là: "service-worker.js"

    Tên tài sản của tệp worker dịch vụ do trình bổ trợ này tạo.

InjectManifest

Lớp này hỗ trợ biên dịch tệp trình chạy dịch vụ được cung cấp qua swSrc và chèn vào trình chạy dịch vụ đó một danh sách URL và thông tin sửa đổi để lưu trước đó dựa trên quy trình tài sản gói web.

Sử dụng một thực thể của InjectManifest trong mảng plugins của cấu hình webpack.

Ngoài việc chèn tệp kê khai, trình bổ trợ này sẽ thực hiện biên dịch tệp swSrc bằng cách sử dụng các tuỳ chọn trong cấu hình webpack chính.

// The following lists some common options; see the rest of the documentation
// for the full set of options and defaults.
new InjectManifest({
  exclude: [/.../, '...'],
  maximumFileSizeToCacheInBytes: ...,
  swSrc: '...',
});

Thuộc tính

Thuộc tính

default

Loại

đối tượng

Thuộc tính

  • GenerateSW

    truy vấn

  • InjectManifest

    truy vấn