Xây dựng với ma sát – Tư vấn hiệu suất web

Gần đây tôi đã viết về tầm quan trọng của việc làm cho điều đúng trở nên dễ dàng. Điều ngược lại cũng đúng: nó rất quan trọng để làm cho những điều sai trái trở nên khó khăn. Tôi đã ám chỉ nó trong bài viết đó một chút, nhưng tôi nghĩ rằng nó đáng để gọi ra một cách rõ ràng. Nó rất quan trọng để giới thiệu một số ma sát trong quy trình làm việc của chúng tôi để giúp ngăn chặn các hành động sai trái.

Tiếp tục các vấn đề tương tự liên quan đến sức khỏe, ma sát là một phần quan trọng trong cách tôi quản lý chiếc răng ngọt ngào của mình. Tôi làm việc một mình trong một văn phòng nhỏ. Không có gì ngăn cản tôi liên tục ăn vặt một loạt đồ ngọt, và wow tôi sẽ thích. Tôi là một kẻ hút cho bất cứ thứ gì có đường.

Nhưng tôi đã phát hiện ra một điều khác về bản thân mình: Tôi cũng rất lười biếng. Vì vậy, tôi có một cách tiếp cận hai phần. Đầu tiên là làm cho điều đúng dễ dàng. Tôi có táo, cam, hạnh nhân, quả nam việt quất khô, và tất cả các loại lựa chọn ăn vặt lành mạnh hơn ngay bên cạnh bàn làm việc của tôi. Nếu tôi đói, tôi không thể di chuyển. Tôi đưa tay ra và họ đang ở đó.

Nhưng phần thứ hai của quá trình đó cũng quan trọng không kém. Tôi làm điều sai trái khó hơn. Tôi có một số đồ ngọt, nhưng họ đã giấu mình trong một phòng bên cạnh. Nó không khó để đến với họ, nhưng nó đòi hỏi nhiều nỗ lực hơn những lựa chọn thay thế lành mạnh ngay bên cạnh tôi. Nó không ngăn tôi ăn đồ ngọt, nhưng điều đó có nghĩa là việc tiếp cận với sô cô la đó liên quan đến một quyết định có ý thức để đưa vào công việc nhiều hơn là nếu tôi quyết định có một quả táo. Nó chỉ đủ ma sát để thay đổi cách tôi ăn nhẹ.

Rất nhiều cải tiến quy trình công việc hiện đại đã xuất hiện vào khoảng loại bỏ ma sát . Chúng tôi muốn làm cho nó dễ dàng hơn để triển khai nhanh chóng. Các công cụ như npm làm cho nó rất dễ dàng truy cập vào bất kỳ và tất cả các mô-đun chúng ta có thể nghĩ đến. Quản lý thẻ cho phép mọi người nhanh chóng thêm dịch vụ của bên thứ ba khác.

Tất cả những điều này, trên bề mặt, cung cấp một số giá trị, nhưng hậu quả là rất lớn. Bởi vì các quá trình này loại bỏ ma sát, chúng không bao giờ thực sự cho chúng ta cơ hội để tạm dừng và xem xét những gì chúng ta đang làm.

Giới thiệu lại một số ma sát lành mạnh, một số khoảnh khắc tạm dừng, trong các quy trình của chúng tôi là rất quan trọng để đảm bảo mức chất lượng tổng thể cao hơn.

Ví dụ, hãy để Hãy giải quyết rắc rối với npm.

npm đã thay đổi cách chúng ta xây dựng, nhưng tôi không nghĩ rằng bất cứ ai cũng có thể lập luận rằng nó đã phá hoại một số sự tàn phá nghiêm trọng trong quá trình này. Tính sẵn sàng của một mô-đun JavaScript cho hầu hết mọi thứ bạn có thể tưởng tượng đã dẫn đến các vấn đề bảo mật, mối quan tâm về khả năng truy cập và sự phình to tổng thể. Nó đã làm cho nó quá dễ dàng để thêm nhiều mã hơn vào các trang web của chúng tôi mà không bao giờ xem xét sự đánh đổi.

Tôi đồng ý với Alex về điều này. Thêm nhiều mã hơn sẽ là một quyết định rất có chủ ý:

JavaScript phải là một lựa chọn có chủ ý * sâu sắc trên máy khách. Các công cụ loại bỏ chủ ý, bất cứ điều gì khác mà chúng có thể đã làm cho nhóm của bạn, có thể đã đánh chìm tàu ​​chiến hoàn hảo của bạn.

Ở đây, một ví dụ về cách chúng ta có thể đưa một số ma sát vào quy trình để giúp giải quyết các thách thức về hiệu suất bằng cách tập trung vào hai điểm quan trọng trong quy trình làm việc của chúng tôi: cài đặt và xây dựng / triển khai.

Trong khi cài đặt

Điều đầu tiên chúng ta có thể làm là giới thiệu một số ma sát khi lần đầu tiên cài đặt tập lệnh. Rốt cuộc, những vấn đề dễ khắc phục nhất là những vấn đề đã xảy ra.

Tôi thích bundle-phobia-install cho việc này. bundle-phobia-install là một trình bao bọc xung quanh npm install sử dụng thông tin từ Bundlephobia để cài đặt các mô-đun npm có điều kiện. Nó thực hiện điều này bằng cách so sánh kích thước của gói với một số giới hạn định trước. Nó mặc định ở giới hạn kích thước là 100kB tổng thể (như trong tổng số tất cả các phụ thuộc), nhưng bạn có thể định cấu hình theo cách bạn muốn.

Bạn cũng có thể thiết lập giới hạn cho các gói riêng lẻ.

Ví dụ: các cài đặt sau (được định cấu hình trong tệp pack.json ) sẽ đảm bảo rằng không có gói riêng lẻ nào có kích thước trên 20kB có thể được cài đặt và có thể tổng kích thước của tất cả các phụ thuộc không quá 100kB.

  ...
   "bó-ám ảnh"  :  {
     "kích thước tối đa"  :   "20kB" ,
     "kích thước tổng thể tối đa"  :   "100kB" 
  },
...
 

Bây giờ, nếu chúng ta cố gắng cài đặt, giả sử, lodash cài đặt sẽ thất bại vì lodash vượt quá giới hạn kích thước gói riêng lẻ của chúng tôi.

    

Bạn vẫn có thể cài đặt lodash nhưng hiện tại yêu cầu bạn phải chạy bundle-phobia-install với cờ tương tác ( -i ) và phê duyệt thủ công cài đặt mặc dù thực tế là nó vượt quá giới hạn của bạn. Nó biến một quyết định vô thức thành một quyết định có ý thức.

Trong quá trình xây dựng / triển khai

Bằng cách có một số ma sát trong quá trình cài đặt, chúng tôi giúp cung cấp cơ sở tốt hơn cho kích thước của JavaScript. Mặc dù vậy, nó vẫn rất quan trọng để tạo ra một số ma sát trong quá trình xây dựng và triển khai. Đối với một, cách tiếp cận cài đặt của chúng tôi chỉ giới hạn các mô-đun npm, không thực sự là mã riêng của chúng tôi. Chúng tôi cũng không thực sự biết được hình dạng chính xác của các gói của chúng tôi khi cài đặt vào sau đó.

Đối với các dự án dựa trên webpack, bạn có thể tận dụng các gợi ý về hiệu suất của Webpack. Có hai gợi ý có sẵn cho chúng tôi: Performance.maxEntrypointSize và Performance.maxAssetSize . Performance.maxEntrypointSize cho phép chúng tôi đặt giới hạn cho tất cả các tài sản được sản xuất trên webpack cho một tuyến đường nhất định. Performance.maxAssetSize cho phép chúng tôi đặt giới hạn cho bất kỳ tài sản webpack nào được sản xuất.

Theo mặc định, các gợi ý chỉ là gợi ý mà. Chúng hiện lên như những lời cảnh báo nhưng don không làm gì cụ thể. Bạn có thể thay đổi điều đó bằng cách đặt thuộc tính peformance.h gợi ý thành lỗi .

Vì vậy, với cấu hình sau, webpack sẽ đưa ra lỗi bất cứ khi nào một tài sản riêng lẻ vượt quá 100kB hoặc toàn bộ tài sản cho một tuyến đường nhất định vượt quá 150kB.

   mô-đun .  xuất khẩu   =  {
   // ...
   hiệu suất  :  {
     gợi ý  :   'lỗi' ,
     maxEntrypointSize  :   100000 ,
     maxAssetSize  :   150000 
  }
};
 

    

Nếu bạn không sử dụng gói web, hoặc nếu bạn vẫn muốn tăng các gợi ý này, chúng tôi cũng có thể giới thiệu một số kiểm tra kích thước gói ở cấp độ yêu cầu kéo hoặc triển khai. Gói là một lựa chọn phổ biến ở đây.

Với bundize, chúng tôi thiết lập kích thước tối đa cho mỗi gói chúng tôi muốn theo dõi. Sau đó, chúng tôi có thể chạy Gói với các giới hạn đó cho mỗi yêu cầu kéo hoặc trong quá trình tích hợp liên tục của chúng tôi để ngăn chúng tôi triển khai nếu bất kỳ kích thước gói nào bị vượt quá.

    

Tòa nhà có ma sát

Ma sát lành mạnh trong các quy trình của chúng tôi, kết hợp với tự động hóa và báo cáo khi thích hợp, có thể có tác động đáng kể đến những gì chúng tôi gửi. Khi chúng tôi buộc bản thân phải dành những khoảnh khắc này để xem xét ý nghĩa của những gì chúng tôi sắp thêm vào cơ sở mã của mình, khi chúng tôi khó có thể thêm nhiều sự phình to vào các ứng dụng của mình theo mặc định, chúng tôi không chỉ thay đổi cách chúng tôi xây dựng mà còn thay đổi cách chúng ta nghĩ về việc xây dựng. Nó có hiệu ứng quan sát viên áp dụng cho cách chúng ta viết mã.

Khi chúng tôi phải xem xét trọng lượng của mỗi mô-đun mà chúng tôi thêm vào dự án của mình (hoặc bao gồm các lỗ hổng hoặc những vấn đề về khả năng truy cập mà chúng mang theo), chúng tôi bắt đầu chú ý hơn một chút đến ít nhất một phần hiệu suất mỗi ngày độc thân Nó đã chiến thắng một cách kỳ diệu trong tất cả các tai ương về hiệu suất của chúng tôi, nhưng nó chắc chắn giúp chúng tôi đi đúng hướng.