Đô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-domNế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ênNgượ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ậmSử 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 OverflowMã 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ụngvâ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";
0Về 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";
1Cả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