Cách kiểm soát chunking của mã chia sẻ bằng cách sử dụng `nhập()` khối (Webpack 2.2)

Question

Sử dụng webpack phiên bản 2.2.0.

Tôi có một ứng dụng đơn lẻ với một cấu hình entry duy nhất: entry: { app: ['./js/main.js'] }. Đây là ứng dụng tự động tải lượt xem qua số import('./js/views/1') để tách mã.

Sự cố tôi gặp phải là các tệp views/1, views/2, v.v. được tạo ra có nhiều mô-đun trùng lặp bên trong chúng. Các tập tin và nội dung của họ trông như thế này:

• chính: ./js/main.js
  • 0: ./js/views/1.js
  • ./js/modules/a.js
  • ./js/modules/b.js
  • 1: ./js/views/2.js
  • ./js/modules/b.js
  • ./js/modules/c.js

Lưu ý rằng cả hai views/1.js và views/2.js có một bản sao đầy đủ của chia sẻ modules/b.js module. Trong trường hợp của tôi, tôi có hàng chục lượt xem và nhiều mô-đun được chia sẻ nhiều hơn nên sự trùng lặp là mối quan tâm lớn đối với tôi. Dưới đây là những gì mà 'webpack-bó-phân tích' trông giống như:

Tôi đã thử thêm CommonChunkPlugin để giúp giải quyết điều này, nhưng nó dường như không ảnh hưởng đến nhập khẩu năng động ở tất cả.

Điều tôi đang tìm là cách để webpack tự động di chuyển tất cả các mô-đun được chia sẻ thành các tệp riêng biệt. Lý tưởng nhất, tôi muốn webpack để sản xuất các khối sau:

• chính: ./js/main.js
  • 0: ./js/views/1.js
  • 1: ./js/views/2.js
  • 2: ./js/modules/a.js
  • 3: ./js/modules/b.js
  • 4: ./js/modules/c.js

Vì vậy, mỗi mô-đun theo nghĩa đen là một đoạn riêng biệt. Đây sẽ là cách tối ưu nhất để tải chúng bằng HTTP2.

Đây là mã cho dự án mẫu: https://github.com/EvNaverniouk/webpack-code-splitting

Làm thế nào tôi có thể đạt được điều này?

Tôi tin rằng đây là liên quan đến vấn đề này: https://github.com/webpack/webpack/issues/3981

Answer 1

Để giải quyết các lỗi trùng lặp, bạn có thể sử dụng được cung cấp bởi CommonsChunkPlugin gói tối ưu hóa webpack. Được nêu bởi số documentation, thực hiện như sau:

Tạo một đoạn phụ, chứa các mô-đun chung được chia sẻ giữa các điểm nhập.

Đối với vấn đề thứ hai bạn mô tả, đó sẽ là một nhiệm vụ cho nuốt chửng. Gulp có luồng đầu vào và đầu ra phát trực tiếp vào tệp. Về cơ bản tạo ra một bản sao 1 của bản gốc đã nộp, nhưng sau đó được biên dịch, biên soạn, vv.

Tôi sẽ không đề xuất cấu trúc thứ hai cho web vì nó tạo ra quá nhiều yêu cầu HTTP cho trình duyệt có thể mất nhiều thời gian. Đặc biệt nếu trang web của bạn đang chạy trên giao thức HTTP/1.1. Nó thường có lợi hơn để cho khách hàng tải xuống các tệp ít hơn với nhiều nội dung hơn trong đó.