Very slow compilation when adding a css framework.

[wiseaidev]

Working with plain good ol' CSS without any frameworks is blazingly fast, like a 3-sec max compilation. However, things change dramatically when adding a CSS framework. For example, with Tailwind, I am getting around 1-2 minutes of compile time after each change. With Bootstrap, I am getting around 2-5 minutes of compilation. So, it would be best if this thing could be Improved.

Edit: Somewhat related to #2520

[futursolo]

Thank you for filing this issue.

However, I do not think this is related to #2520? unless you are having very deeply nested elements. In which a mitigation is provided in the issue in which you can split this into multiple smaller html! chunks.

If you think this is an issue with Yew, could you please provide some sample code that you think it is overly slow?

[wiseaidev]

unless you are having very deeply nested elements.

Yup! That's why it is related to the other issue.

you can split this into multiple smaller html! chunks.

I am trying to figure it out.

Component:

use yew::prelude::*;

#[function_component(CartPage)]
pub fn cart_page() -> Html {
    html! {
      <section class="pt-5">
        <div class="main-content app-content">
        <div class="side-app">
            <div class="main-container container-fluid">
            <div class="page-header">
                <h1 class="page-title">{"Cart"}</h1>
            </div>
            <div class="row">
                <div class="col-lg-12 col-md-12 col-sm-12 col-xl-8">
                <div class="card cart">
                    <div class="card-header">
                    <h3 class="card-title">{"Shopping Cart"}</h3>
                    </div>
                    <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-bordered table-vcenter">
                        <thead>
                            <tr class="border-top">
                            <th>{"Product"}</th>
                            <th>{"Title"}</th>
                            <th>{"Price"}</th>
                            <th>{"Quantity"}</th>
                            <th>{"Total"}</th>
                            <th>{"Action"}</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                            <td>
                                <div class="text-center">
                                <img
                                    src="imgs/banner-mg.ong"
                                    alt=""
                                    class="cart-img text-center"
                                />
                                </div>
                            </td>
                            <td>{"title"}</td>
                            <td class="fw-bold">{"$69"}</td>
                            <td>
                                <div class="handle-counter" id="handle-counter">
                                <button
                                    type="button"
                                    class="counter-minus btn btn-white lh-2"
                                >
                                    <i class="fa fa-minus text-muted"></i>
                                </button>
                                <input type="text" value="2" class="qty" />
                                <button
                                    type="button"
                                    class="counter-plus btn btn-white lh-2 shadow-none"
                                >
                                    <i class="fa fa-plus text-muted"></i>
                                </button>
                                </div>
                            </td>
                            <td>{"$69"}</td>
                            <td>
                                <div class="d-flex g-2">
                                <a
                                    class="btn text-secondary bg-secondary-transparent btn-icon py-1 me-2"
                                    data-bs-toggle="tooltip"
                                    data-bs-original-title="Edit"
                                    ><i class="fa-solid fa-heart"></i
                                ></a>
                                <a
                                    class="btn text-danger bg-danger-transparent btn-icon py-1"
                                    data-bs-toggle="tooltip"
                                    data-bs-original-title="Delete"
                                    ><i class="fa-solid fa-trash"></i
                                ></a>
                                </div>
                            </td>
                            </tr>
                        </tbody>
                        </table>
                    </div>
                    </div>
                    <div class="card-footer">
                    <div class="row">
                        <div class="col-md-6 col-sm-6">
                        <div class="input-group mb-1">
                            <input
                            type="text"
                            class="form-control"
                            placeholder="Search ..."
                            />
                            <span class="input-group-text btn btn-primary"
                            >{"Apply Coupon"}</span
                            >
                        </div>
                        </div>
                        <div class="col-md-6 col-sm-6 text-end">
                        <a
                            href="#"
                            class="btn btn-default disabled btn-md"
                            >{"Update Cart"}</a
                        >
                        </div>
                    </div>
                    </div>
                </div>
                </div>
                <div class="col-lg-12 col-xl-4 col-sm-12 col-md-12">
                <div class="card">
                    <div class="card-header">
                    <div class="card-title">{"Cart Totals"}</div>
                    </div>
                    <div class="card-body py-2">
                    <div class="table-responsive">
                        <table class="table table-borderless text-nowrap mb-0">
                        <tbody>
                            <tr>
                            <td class="text-start">{"Total"}</td>
                            <td class="text-end">
                                <span class="fw-bold ms-auto">{"$69"}</span>
                            </td>
                            </tr>
                            <tr>
                            <td class="text-start">{"Delivery Charges"}</td>
                            <td class="text-end">
                                <span class="fw-bold text-green">{"$0 - Free"}</span>
                            </td>
                            </tr>
                            <tr>
                            <td class="text-start">{"Tax"}</td>
                            <td class="text-end">
                                <span class="fw-bold text-danger">{"+ $1"}</span>
                            </td>
                            </tr>
                            <tr>
                            <td class="text-start">{"Coupon Discount"}</td>
                            <td class="text-end">
                                <span class="fw-bold text-success">{"- $0"}</span>
                            </td>
                            </tr>
                            <tr>
                            <td class="text-start fs-18">{"Total Bill"}</td>
                            <td class="text-end">
                                <span class="ms-2 fw-bold fs-23">{"$70"}</span>
                            </td>
                            </tr>
                        </tbody>
                        </table>
                    </div>
                    </div>
                    <div class="card-footer">
                    <div class="btn-list">
                        <a href="/shop" class="btn btn-primary"
                        ><i class="fa fa-arrow-left me-1"></i>{"Continue Shopping"}</a
                        >
                        <a href="/checkout" class="btn btn-success float-sm-end"
                        >{"Check Out"}<i class="fa fa-arrow-right ms-1"></i
                        ></a>
                    </div>
                    </div>
                </div>
                </div>
            </div>
            </div>
        </div>
        </div>
      </section>
    }
}

Importing fontawesome, bootstrap, and other CSS files into index.html this way:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link data-trunk rel="icon" href="logo.svg" type="image/svg" />
    <link data-trunk rel="css" href="styles/base.css" type="text/css" />
    <link data-trunk rel="css" href="styles/header.css" type="text/css" />
    <link data-trunk rel="css" href="styles/banner.css" type="text/css" />
    <link data-trunk rel="css" href="styles/featured.css" type="text/css" />
    <link data-trunk rel="css" href="styles/footer.css" type="text/css" />
    <link data-trunk rel="css" href="styles/cart-modal.css" type="text/css" />
    <link data-trunk rel="css" href="styles/cart.css" type="text/css" />
    <link data-trunk rel="copy-dir" href="imgs" />
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
    <title>Blazingly Fast ECommerce website</title>
  </head>
  <body>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
    <script
      src="https://kit.fontawesome.com/8f223ead6e.js"
      crossorigin="anonymous"
      defer
    ></script></body>
</html>

Edit-1: These static values will be replaced by data pulled from an API once this issue/discussion is resolved.

Edit-2: For Tailwind, this command is slow for a large codebase:

npx tailwindcss -i ./styles/tailwind.css -o ./dist/.stage/index.css --minify