Compilation is slow.
#2518
-
|
yew 0.19.3 As the html tag increases, the compilation slows down horribly.. It takes more than 3 minutes to serve once.. |
Beta Was this translation helpful? Give feedback.
Answered by
futursolo
Mar 15, 2022
Replies: 1 comment 1 reply
-
|
You are using some deeply nested html tags which could increases compile time significantly. Rustc Profile shows that most of the time the rustc is trying to expand the expression. It's not very clear whether this is due to rustc recursively expand macros or For the time being, you can try to break away a couple layers which should significantly reduce your compilation time: let content = html! {
<div class="block bg-white shadow-lg rounded-lg">
<div class="lg:flex lg:flex-wrap g-0">
<div class="lg:w-6/12 px-4 md:px-0">
<div class="md:p-12 md:mx-6">
<div class="w-96 mx-auto px-4 py-8">
/* LOGO */
<Logo />
/* FORM */
<form>
<div class="space-y-4">
<div class="flex space-x-4">
<div class = "space-y-1">
<div class="float-label-container">
<Field<RegisterForm>
form={&*register_form}
autocomplete="off"
placeholder="first name"
field_name="fname"
class="float-label-control text-sm font-medium shadow border rounded py-3 px-3 leading-tight focus:outline-none focus:shadow-outline focus:border-lime-600 transition duration-500"
class_invalid="border-red-600"
class_valid="border-lime-600"
oninput={oninput_fname.clone()}
/>
<label for="fname" class="float-label-self bg-white text-lime-600">{"first name"}</label>
</div>
<div class="text-sm text-red-600">
{register_form.field_message("fname")}
</div>
</div>
<div class="float-label-container">
<input
id="lname"
placeholder="last name"
class="float-label-control text-sm font-medium shadow border rounded py-3 px-3 leading-tight focus:outline-none focus:shadow-outline focus:border-lime-600 transition duration-500"
autoComplete="off"
type="text" />
<label for="lname" class="float-label-self bg-white text-lime-600">{"last name"}</label>
</div>
</div>
<div class="float-label-container">
<input
id="email"
placeholder="email"
class="float-label-control text-sm font-medium shadow border rounded py-3 px-3 leading-tight focus:outline-none focus:shadow-outline focus:border-lime-600 transition duration-500 w-full"
autoComplete="off"
type="email" />
<label for="email" class="float-label-self bg-white text-lime-600">{"email"}</label>
</div>
<div class="float-label-container">
<input
id="username"
placeholder="username"
class="float-label-control text-sm font-medium shadow border rounded py-3 px-3 leading-tight focus:outline-none focus:shadow-outline focus:border-lime-600 transition duration-500 w-full"
autoComplete="off"
type="text" />
<label for="username" class="float-label-self bg-white text-lime-600">{"username"}</label>
</div>
<div class="flex space-x-4">
<div class="float-label-container">
<input
id="password"
placeholder="password"
class="float-label-control text-sm font-medium shadow border rounded py-3 px-3 leading-tight focus:outline-none focus:shadow-outline focus:border-lime-600 transition duration-500"
autoComplete="off"
type="password" />
<label for="password" class="float-label-self bg-white text-lime-600">{"password"}</label>
</div>
<div class="float-label-container">
<input
id="repeat-password"
placeholder="repeat password"
class="float-label-control text-sm font-medium shadow border rounded py-3 px-3 leading-tight focus:outline-none focus:shadow-outline focus:border-lime-600 transition duration-500"
autoComplete="off"
type="password" />
<label for="repeat-password" class="float-label-self bg-white text-lime-600">{"repeat password"}</label>
</div>
</div>
</div>
<div class="flex items-center justify-between mt-6">
<div class="mr-1">
<label class="flex items-center">
<input type="checkbox" class="border rounded accent-lime-600" checked=true />
<span class="text-sm ml-2"> {"Email me about product news."} </span>
</label>
</div>
<button type="submit" class="px-6 py-2 uppercase inline-flex items-center justify-center rounded border-1.5 border-lime-600 text-sm font-medium hover:bg-black hover:bg-opacity-5 focus:outline-none focus:ring-0 transition duration-150 ease-in-out text-lime-600" > {"Sign Up"} </button>
</div>
</form>
/* FOOTER */
<div class="pt-5 mt-6 border-t border-slate-200">
<div class="text-sm"> {"Have an account? "}
<Link<AppRoute> classes="font-medium text-lime-600 hover:text-lime-700 uppercase" to={AppRoute::Signup}>{"Sign In"}</Link<AppRoute>>
</div>
</div>
</div>
</div>
</div>
/* SIDE */
<div class="lg:w-6/12 flex items-center lg:rounded-r-lg rounded-b-lg lg:rounded-bl-none"
style="background: linear-gradient(to right, #67b26f, #4ca2cd);" >
<div class="text-white px-4 py-6 md:p-12 md:mx-6">
<h4 class="text-xl font-semibold mb-6">{"hello zzz"}</h4>
<p class="text-sm"> {"hello"} </p>
</div>
</div>
</div>
</div>
};
html! {
<div class="h-full gradient-form bg-gray-200 md:h-screen">
<div class="container py-12 px-6 h-full">
<div class="flex justify-center items-center flex-wrap h-full g-6 text-gray-800">
<div class="xl:w-10/12">
{content}
</div>
</div>
</div>
</div>
} |
Beta Was this translation helpful? Give feedback.
1 reply
-
|
thx!. solved it. <div class="h-full gradient-form bg-gray-200 md:h-screen">
<div class="container py-12 px-6 h-full">
<div class="flex justify-center items-center flex-wrap h-full g-6 text-gray-800">
<div class="xl:w-10/12">
<div class="block bg-white shadow-lg rounded-lg">
<div class="lg:flex lg:flex-wrap g-0">
<div class="lg:w-6/12 px-4 md:px-0">
<div class="md:p-12 md:mx-6">
<div class="w-96 mx-auto px-4 py-8">
/* LOGO */
<Logo />
/* FORM */
{node_form}
/* FOOTER */
{node_footer}
</div>
</div>
</div>
/* SIDE */
{node_side}
</div>
</div>
</div>
</div>
</div> |
Beta Was this translation helpful? Give feedback.
Answer selected by
initprism
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
You are using some deeply nested html tags which could increases compile time significantly.
Rustc Profile shows that most of the time the rustc is trying to expand the expression.