Làm cách nào để trích xuất CSS quan trọng (trong màn hình đầu tiên) từ mỗi mục nhập?

Question

Tôi có một ứng dụng đa trang đơn giản với ba trang, tôi webpack.config.jsentry trông giống như:

{ 
    entry: { 
    a: 'pages/a.js', 
    b: 'pages/b.js', 
    c: 'pages/c.js', 
    } 
} 

Mỗi trang bao gồm một số Phản ứng linh kiện, một số trong đó có thể nhìn thấy trên-the-gấp trên đầu render, và một số trong số đó là ngoài tầm nhìn.

Tôi muốn khai báo xác định thành phần nào là 'quan trọng' (trong màn hình đầu tiên) cho mỗi trang/mục nhập và có CSS ​​được trích xuất thành một tệp riêng biệt. Một cái gì đó như:

{ 
    a: ['compononents/button/style.css', ...], 
    b: ['compononents/title/style.css', ...], 
    c: ['compononents/header/style.css', ...] 
} 

xuất ra cái gì đó như:

- dist/a.critical.css 
- dist/b.critical.css 
- dist/c.critical.css 

Tôi đã chơi đùa với các extract-text-webpack-plugin, nhưng dường như không thể tìm thấy một cách để nói với nó để chỉ trích cụ thể trong CSS bối cảnh của một mục cụ thể.

---

Làm thế nào tôi có thể trích xuất nội dung file CSS cụ thể khi trong bối cảnh của một mục/trang cụ thể?

Answer 1

Tôi đang ở trong tình trạng tương tự, dự án của chúng tôi đủ lớn và chúng tôi cần hơn 20 tệp css quan trọng khác nhau. Tôi tìm thấy một cách để tạo ra CSS quan trọng hơn không gây đau đớn. Tôi đang sử dụng https://github.com/zgreen/postcss-critical-css cho phép tạo các tệp css quan trọng khác nhau.

@critical crit.css { 
    .head { 
     background: red; 
    } 

    .head .logo { 
     display: block 
    } 
} 

@critical v2.css { 
    .head.v2 { 
     background: green; 
    } 
} 

.main { 
    color: #333; 
} 

.footer { 
    background: black; 
} 

Postcss quan trọng-css sẽ tạo ra 3 file - tập tin css của tôi (có hoặc không có phong cách quan trọng) và 2 file css quan trọng - v2.css và crit.css

Hy vọng điều này sẽ giúp bạn!