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

build tools (but no optimization?)


hi

i was reading through the docs about webpack/gulp for building the files, but i dont see anything about plugins for code splitting / tree shaking / minifying / etc. etc.

i also noticed that the demo theme has alot of unused js/css so im a bit suspicious about that.

can someone provide some clarity please?

https://prnt.sc/pIZN5IY4suK8

thx


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)


Keenthemes wrote in the documentation that they did it that way on purpose. You can use webpack or gulp in the “tools” folder to delete the plugins etc that you don’t need in the respective config files and then recompile them.
And the code will be minified too. On gulp compile file:

if (args.prod !== false) {
// force disable debug for production
build.config.debug = false;
// force assets minification for production
build.config.compile.jsMinify = true;
build.config.compile.cssMinify = true;
}



okay so basically "were not gonna cover how to optimize your build bc were selling a theme, not teaching you front end performance" right?


thats fair ty!



No, completely wrong. All you have to do is mark and delete the libraries that you don't need and then run the gulp/webpack command. What else do you think Keenthemes should do? Create 100 different Javascript files that contain the basic functions everywhere and then one extra function for the page? That would be a mess!
In addition, when using a theme, you should have at least a basic understanding of modern technologies and their functionality. By the way, you can learn Gulp in just a few days.



Hi Devin Schumacher,

The numerous JS/CSS files included in the Metronic demo are primarily for illustrative purposes. In a real-world application, you typically include only the files necessary for your specific use case. To enhance performance, you can remove the CSS/JS plugins that are not required.

For minifying the output of CSS/JS files, you can use Gulp with the --prod flag, as an example:


gulp --prod


This command will run the Gulp build with minification of output JS/CSS. Many unnecessary files and features in the demo are there for demonstration purposes and should be used to fit your application's requirements.

Thanks to Johannes Kanthak for providing clarification on this matter.


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  :(