Bạn có thể liên kết hai tệp JavaScript với nhau không?

Hôm qua, tôi đã viết về việc bạn có cần công cụ xây dựng hay không và xem xét một số công cụ tôi sử dụng trong các dự án của mình

Một trong những công cụ đó là rollup. js

cuộn lên. js lấy các tệp JS mô-đun, kết hợp chúng và tách chúng ra ở một hoặc nhiều định dạng. Đối với các trang web, tôi tạo IIFE đơn giản. Đối với các plugin và công việc nguồn mở, tôi có thể sử dụng nó để xuất mã của mình thành các mẫu mô-đun tiết lộ, JS phổ biến, v.v.

Một trong những sinh viên của tôi đã viết thư trả lời để hỏi tại sao tôi lại bận tâm đến việc kết hợp các tệp và điều đó đã dẫn đến một cuộc thảo luận thực sự tốt

Là kết hợp các tập tin lỗi thời?

HTTP/2 phủ nhận rất nhiều cách hack hiệu suất cũ hơn trong những ngày trước [giả sử bạn đã bật nó trên máy chủ của mình]

Trước đây, trong HTTP/1, các trình duyệt sẽ tải xuống tối đa hai tệp từ một miền tại một thời điểm. Có nhiều tệp nhỏ đã tạo ra tắc nghẽn tải xuống có thể làm chậm quá trình hiển thị trang web của bạn. Kết hợp các tệp thành một tệp lớn là một cách để giải quyết vấn đề đó

HTTP/2 cho phép nhiều tệp được tải xuống đồng thời

Như Rachel Andrew đã chỉ ra trong bài viết của cô ấy cho Tạp chí Smashing, việc kết hợp tất cả các tập lệnh của bạn vào một tệp có nghĩa là nếu bạn cập nhật một trong những tệp đó, người dùng cần tải xuống lại mọi thứ, kể cả những thứ chưa thay đổi. Cô ấy đề cập đến CSS ở đây, nhưng điều này cũng áp dụng cho JS

Một vấn đề khác với phép nối là mọi thứ sẽ cần được xóa khỏi bộ đệm cùng một lúc. Bạn không thể cung cấp cho một số tệp không bao giờ thay đổi ngày hết hạn dài trong khi cung cấp cho các phần thường xuyên thay đổi của cơ sở mã một ngày ngắn hơn. Tất cả phải hết hạn nếu thay đổi ngay cả một dòng CSS, được sử dụng trên một trang

Vậy… tại sao lại kết hợp các tệp?

Toán tử import, quản lý phụ thuộc và hiệu suất

Mặc dù việc kết hợp tất cả các tập lệnh trong một dự án có thể đã lỗi thời, nhưng điều đó không đúng trong một lĩnh vực. toán tử gốc import

Khoảng một tháng trước, chúng ta đã học về mô-đun ES và toán tử import để quản lý phụ thuộc. Trong loạt bài đó, tôi đã lưu ý

Việc sử dụng các mô-đun ES vốn có trong trình duyệt dẫn đến nhiều yêu cầu HTTP và tạo ra các vấn đề về hiệu suất giống như thuộc tính CSS @import.

Mặc dù nhiều yêu cầu HTTP đồng thời không phải là vấn đề, nhưng với cả toán tử CSS và JavaScript import, trình duyệt cần phân tích cú pháp tệp và xác định phần phụ thuộc nào đang được nhập trước khi có thể tải chúng xuống. Điều này tạo ra sự chậm trễ khi các tệp đó được tải xuống

Và vì CSS và JS đều chặn hiển thị nên mỗi khi điều này xảy ra, quá trình hiển thị có thể bắt đầu trong trang web hoặc ứng dụng của bạn sẽ bị chậm lại

Đây là sự cố xảy ra với một lớp nhập, nhưng nếu các tệp đã nhập của bạn tự nhập nhiều tệp hơn, điều đó có thể tạo ra tắc nghẽn hiệu suất lớn với các tập lệnh của bạn

Vì thế…

Kết hợp các tệp có thể tốt hơn cho hiệu suất

Đối với các plugin lớn hơn của mình, tôi thích làm việc với một số tệp nhỏ hơn, nhiều mô-đun hơn thay vì một tệp JavaScript lớn 3.000 dòng. Đôi khi, làm như vậy cũng giúp tôi tiết kiệm rất nhiều công việc và giữ cho mã của tôi KHÔ hơn

Ví dụ: hãy xem Reef, 2 của tôi. Thư viện giao diện người dùng dựa trên trạng thái 5kb. Bạn có thể tìm mã nguồn ở đây

Trong dự án này, tôi có ba tệp

• import './polyfills/proxy.js';
  import './polyfills/customEvent.js';
  import Reef from './components/reef.js';
  
  export default Reef;
  

  1 chứa đối tượng hàm tạo chính của

  import './polyfills/proxy.js';
  import './polyfills/customEvent.js';
  import Reef from './components/reef.js';
  
  export default Reef;
  

  2 và các phương thức của nó

• import './polyfills/proxy.js';
  import './polyfills/customEvent.js';
  import Reef from './components/reef.js';
  
  export default Reef;
  

  3 chứa tất cả các chức năng của trình trợ giúp mà tôi sử dụng để phân biệt và cập nhật DOM

• import './polyfills/proxy.js';
  import './polyfills/customEvent.js';
  import Reef from './components/reef.js';
  
  export default Reef;
  

  0 chứa một số phương thức trợ giúp giúp thực hiện các tác vụ lặp đi lặp lại dễ dàng hơn

Sử dụng tổng số. js, tôi có thể kết hợp tất cả các tệp này và các phương thức của chúng thành một hàm

import './polyfills/proxy.js';
import './polyfills/customEvent.js';
import Reef from './components/reef.js';

export default Reef;

Điều này cải thiện hiệu suất vì tôi không còn có cây phụ thuộc lồng nhau làm chậm kết xuất. Nó cũng giữ tất cả các chức năng tiện ích nhỏ và phương thức DOM của tôi ngoài phạm vi toàn cầu, nơi chúng có thể gây ra xung đột và sự cố với các tập lệnh khác

Sử dụng cùng một tệp để tạo các đầu ra khác nhau

cuộn lên. js cũng cho phép tôi lấy các tệp đó và xuất chúng dưới nhiều dạng

Sử dụng một bộ sưu tập mã đó, tôi có thể tự động tạo Mẫu mô-đun Revealing cho những người muốn tải tệp trực tiếp trong trình duyệt của họ, tệp JS phổ biến cho những người sử dụng NPM và nhập ES gốc cho những người muốn quản lý tệp của riêng họ

Bạn có thể nhận thấy rằng mã nguồn cũng bao gồm một thư mục

import './polyfills/proxy.js';
import './polyfills/customEvent.js';
import Reef from './components/reef.js';

export default Reef;

Tôi cung cấp hai phiên bản của Reef. một cái bao gồm các polyfill để hỗ trợ IE và một cái không có chúng nếu bạn muốn tự mình quản lý các polyfill hoặc chỉ hỗ trợ các trình duyệt hiện đại

Sử dụng các mô-đun ES và tổng số. js, đó là một nhiệm vụ tầm thường. Tệp

import './polyfills/proxy.js';
import './polyfills/customEvent.js';
import Reef from './components/reef.js';

export default Reef;

import Reef from './components/reef.js';

export default Reef;

Và tệp

import './polyfills/proxy.js';
import './polyfills/customEvent.js';
import Reef from './components/reef.js';

export default Reef;

import './polyfills/proxy.js';
import './polyfills/customEvent.js';
import Reef from './components/reef.js';

export default Reef;

Điều này có ý nghĩa gì với bạn?

Nếu máy chủ của bạn bị kẹt trên HTTP/1—vì bạn chưa cài đặt chứng chỉ SSL hoặc máy chủ của bạn không hỗ trợ HTTP/2—việc kết hợp tất cả các tệp của bạn thành một vẫn là một động thái tốt để tăng hiệu suất

Nếu bạn đang sử dụng tính năng nhập [CSS hoặc JS] để quản lý phụ thuộc, ngay cả khi đã bật HTTP/2, bạn vẫn nên kết hợp các tệp của mình vì lý do hiệu suất

Nếu bạn chỉ có một số tệp tập lệnh riêng lẻ và HTTP/2 được bật trên trang web hoặc ứng dụng của mình, thì có lẽ tốt hơn hết là bạn nên giữ chúng là các tệp riêng biệt, được tải riêng lẻ