Get 2024 Templates Mega Bundle!14 Bootstrap, Vue & React Templates + 3 Vector Sets
Get for 99$

The presence of the "plugins.bundle.js" file is negatively impacting performance in the Lighthouse test.


In the lighthouse test, plugins.bundle.js took more time to load. so it's causing the performance of the site.
Anyway to import/use this effectively?!


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (4)


Hi,

Thank you for your feedback.

Metronic by default includes all available plugins for demo purposes. You can remove unused plugins and recompile the bundle assets via gulp or webpack to optimize the bundle size.

We use the bundle method for the best performance and quicker page loading its better to include all core plugins at once within a single bundle rather than loading each plugin separately within different HTTP requests. The bundle file is loaded once and all subsequences loads are taken from the user browser cache.

Also, you can enable server-side gzip for your page assets which will increase the page loading speed dramatically.

To reduce the bundle size and remove unused plugins please refer to this post.

You can check our devs site's Google Page Test Score that's built with Metronic. The score is quite high as can be seen in the reports.

Regards.



Thank you for your reply.

In the Lighthouse coverage tab, I noticed that 74.2% of the code in Plugins.bundle.js is not being utilized on my layout page. Could you please suggest a way to remove the unused code from it?

Regards
Nikunj



Hi,

Please note that Plugins.bundle.js contains all core plugins that may be used in your current or other pages as well. This script is loaded once and other subsequent loads are taken from the browser cache so for end users loading time overall will be quite fast.

If you need to remove unused plugins from the bundle follow the below steps:

  1. Open theme/tools/gulp.config.js and refer to base->global->src config node. The mandatory contains the core resource that is required for Metronic's base functionality while the optional node lists the optional resource that can be excluded according to a project's requirements.
  2. Under optional node remove any resource by referring to a plugins documentation
  3. Recompile the assets using the Gulp builder


Regards.

Thank you for your quick response happy


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(