Multiple injection of css/js

Cong Le asked on April 6, 2022 06:09

Hello,

I am developing a website using Kentico 13 experience version.

I added <page-builder-styles /> and <page-builder-scripts /> in the master page to be able to add widget to the editable area in the page.

The CSS/JS of the widget is placed in "~/PageBuilder/Public/Widget".

For example:

"~/PageBuilder/Public/Widget/WidgetA", "~/PageBuilder/Public/Widget/WidgetB",....

I have a lot of widgets. When loading a page that has some widgets only, I see all the widget CSS/JS are loaded even if they are not used on the page.

I guess when using <page-builder-styles /> and <page-builder-scripts />, the kentico system imported all the css/js under "~/PageBuilder/Public/" automatically.

I think it is really impacting the performance.

Can someone help me?

Thank you very much!

Recent Answers


Dmitry Bastron answered on April 6, 2022 06:37

Hi Cong Le,

Yes, this is correct, by default Kentico bundles all widgets together and I'm not aware of any optimisation to serve only CSS/JS used on the page.

If you have a lot of widgets, I would assume you are working on a fairly large and complex website. For these cases I believe the recommended practice would be to work on the frontend code separately, maybe not even including it into Visual Studio.

In our agency we are using the following approach, which is obviously a custom code:

  • JS/CSS build is managed separately and our frontend developers use their favourite tools to work on this code
  • the result of the frontend build contains a manifest.json file which contains a list of all component small JS/CSS files compiled
  • then, in Xperience solution we have a custom tag helper where you can specify the name of the frontend component, this tag helper will find appropriate JS/CSS from manifest.json and reference these small files, if those haven't been referenced before during this page execution (the files already referenced during the page execution can be stored and checked in request context)

I would definitely recommend allocating some time to develop similar custom approach which will be working for your team and use it across multiple projects.

0 votesVote for this answer Mark as a Correct answer

Brenden Kehren answered on April 6, 2022 06:44

Check out the documentation on how to bundle those files "automatically".

0 votesVote for this answer Mark as a Correct answer

Cong Le answered on April 6, 2022 09:55 (last edited on April 6, 2022 09:55)

Hi Dmitry Bastron, Brenden Kehren

Thank you very much for your help

0 votesVote for this answer Mark as a Correct answer

Dong Bui answered on June 3, 2022 10:13

Hi Brenden,

Can you check your document link ? It not found now

Thanks.

Image Text

0 votesVote for this answer Mark as a Correct answer

   Please, sign in to be able to submit a new answer.