CSS tách mã

Đôi khi việc tách mã và phân đoạn mã bị tránh như một cách tối ưu hóa hiệu suất vì nó được cho là phức tạp hoặc "ma thuật đen". Tôi hy vọng sẽ giải quyết được những lo ngại đó, bởi vì trong hầu hết các trường hợp, việc phân tách mã có thể được thực hiện tương đối dễ dàng và có thể mang lại cho bạn những lợi ích đáng kể;

Phần khó nhất về chia mã có thể là quyết định cách chia mã & các gói của bạn. Điều này không được đề cập trong bài viết này, nhưng có rất nhiều tài liệu về chủ đề này. bạn có thể muốn đọc. Cải thiện tiếp theo. js và hiệu suất tải trang Gatsby với phân đoạn chi tiết hoặc Cách chính xác 100% để phân chia các phần của bạn với Webpack

Mã cho bản trình diễn này có sẵn trên GitHub. Đóng góp và phản hồi luôn được chào đón

Bản demo được xây dựng bằng Webpack v4 (sắp có bản cập nhật v5. ) và ReactJS, sử dụng chia tách mã dựa trên tuyến đường

  import "glider-js";
  import "glider-js/glider.min.css";

2 và phản ứng-bộ định tuyến-dom

Nếu một hoặc nhiều biểu định kiểu được nhập vào trong một mô-đun hoặc phần phụ thuộc của nó, thì tham chiếu đến biểu định kiểu đi kèm sẽ chỉ được đưa vào đoạn của mô-đun đó. Để rõ ràng, một đoạn có thể bao gồm nhiều tệp (JS & CSS)

Trong ví dụ của chúng tôi, Page1 nhập biểu định kiểu

  import styles from "./style.scss";

Vì nó là tệp duy nhất tham chiếu biểu định kiểu này nên nó sẽ được chia nhỏ. Ngoài ra, Page1 là mô-đun duy nhất nhập thành phần Glider;

src/js/thành phần/tàu lượn/chỉ mục. jsx

  import "glider-js";
  import "glider-js/glider.min.css";

Tất cả những thứ này sẽ được bao gồm trong một đoạn duy nhất, cùng với đầu ra của

  import "glider-js";
  import "glider-js/glider.min.css";

3 ở trên

Ngược lại, nếu một biểu định kiểu được nhập vào nhiều mô-đun, thì trình đóng gói sẽ xuất một biểu định kiểu duy nhất được tham chiếu bởi cả hai mô-đun

Trong ví dụ của chúng tôi, Page2 nhập biểu định kiểu được chia sẻ

  import sharedStyles from "../home/style.scss";

Biểu định kiểu này cũng được nhập trong mô-đun Trang chủ và do đó không được bao gồm trong đoạn Trang2

Theo thiết kế, hình ảnh chỉ được tải xuống khi cần thiết và hiển thị trong DOM. Điều này có nghĩa là hình ảnh sẽ không ảnh hưởng đến kích thước gói của bạn

Nếu bạn đang nhập hình ảnh của mình bằng cách sử dụng

  import "glider-js";
  import "glider-js/glider.min.css";

0 của trình tải tệp thì bạn cũng sẽ được hưởng lợi từ việc ghép nối mô-đun và rung cây trên hình ảnh của mình;

Tuy nhiên, nếu bạn đang sử dụng trình tải url và hình ảnh của bạn đang được mã hóa thành chuỗi Base64 hoặc SVG, thì chúng sẽ được mã hóa thành từng đoạn dẫn đến mã trùng lặp

Có, nhập mô-đun CommonJS và ES6 hoạt động tốt như nhau

Trong ví dụ của chúng tôi, trong Trang 2, hai dòng bên dưới sẽ dẫn đến các đoạn tương đương

  const styles = require("./style.scss");
  //import stylesfrom "./style.scss");

Vâng chắc chắn

Trong bản demo này, mô-đun Trang chủ được tải thường xuyên trong khi các trang khác được tải chậm

  import Home from "../home";
  const Page1 = React.lazy(() => import("../page1"));
  const Page2 = React.lazy(() => import("../page2"));


  
    
      
        
      
      
        
      
      
        
      
    
  

  import "glider-js";
  import "glider-js/glider.min.css";

2 yêu cầu bạn phải xuất mặc định, tuy nhiên, bạn vẫn có thể sử dụng xuất có tên cho các thành phần khác, ngay cả đối với những thành phần đang được tham chiếu bởi thành phần được tải chậm

Sử dụng

  import "glider-js";
  import "glider-js/glider.min.css";

2 có nghĩa là mọi hoạt động xuất trong. /my-module, bất kể nó được sử dụng hay không sử dụng, sẽ cần được đánh giá và thực thi trong trường hợp một trong những lần xuất đó có tác dụng phụ. Do đó, bạn cần thông báo rõ ràng cho Webpack rằng tệp không có tác dụng phụ khi sử dụng gói

  import "glider-js";
  import "glider-js/glider.min.css";

3. tài sản json. Sean Larkin có một lời giải thích tuyệt vời về Stack Overflow

Mã ví dụ bao gồm một thành phần Page3 xuất một thành phần không sử dụng …/glider-named-export. Không có

  import "glider-js";
  import "glider-js/glider.min.css";

4, đoạn kết quả bao gồm nội dung của …/glider-named-export, ngay cả khi nó chưa bao giờ thực sự được sử dụng

vâng nó làm

Cấu hình được sử dụng trong bản demo này đưa vào một tệp CSS quan trọng duy nhất bao gồm tất cả CSS quan trọng được xác định trong dự án. Điều này được thực hiện bằng cách sử dụng đoạn mã sau bên trong tập lệnh/webpack. cấu hình. js

  criticalStyles: {
    name: "critical",
    test: /critical\.(sa|sc|c)ss$/,
    chunks: "initial",
    enforce: true,
  }

Đầu ra của đoạn này sau đó được nội tuyến trong src/templates/index. hbs

  import "glider-js";
  import "glider-js/glider.min.css";

0

Về lý thuyết là có, bởi vì những tệp này chưa được tải xuống và sẽ chỉ được tải xuống sau khi người dùng yêu cầu chúng bằng cách truy cập trang;

Trong bản demo, tôi đang sử dụng WorkboxPlugin rất được khuyến khích

  import "glider-js";
  import "glider-js/glider.min.css";

1

Cảm ơn bạn đã đọc và xin vui lòng để lại cho tôi thông tin phản hồi của bạn. Như mọi khi, nó sẽ rất được chào đón và đánh giá cao. Nếu bạn muốn liên lạc, bạn có thể liên hệ với tôi trên Twitter @imkevdev

Việc tách mã có cải thiện hiệu suất không?

Tại sao sử dụng tách mã?

Bạn có thể sử dụng cái gì để xử lý việc tách mã?

Tách gói là gì?