Best Practice: Using importExtraPlugins Instead of webpack/plugins/
Hey Metronic Community!
I am working on integrating Webpack with the Metronic template and noticed that plugins can be added in two different ways:
1. Through importExtraPlugins() in webpack.config.js.
2. By placing the plugin inside webpack/plugins/custom/ and importing it in plugins.js.
What is Metronic’s best practice for deciding which plugins belong in importExtraPlugins() vs. webpack/plugins/custom/?
I want to ensure that I’m following the best approach for managing plugin bundling in Webpack while keeping performance optimized.
Thank you for your guidance!
Replies (2)
Use `webpack/plugins/custom/` and import `plugins.js` when: The plugin is used selectively and does not need to be included in the global package. This is a third-party JavaScript library (e.g. jQuery plugin, Bootstrap extension) that should be modular. You should only lazy load plugins when needed to optimize performance.
Sprunki Game
Hi Ivan Tamoni
Here's the recommended approach:
1. Global Bundle (plugins.bundle.js)
- Use for: Core plugins that are used throughout application on most pages
- Single HTTP request, better caching
- Add to resources/mix/plugins.js file
2. Custom Plugins (in resources/mix/vendors/)
- Use for: Page-specific or feature-specific plugins not needed globally
- loads plugins only when needed
- Example use cases: Charts, specific form elements, specialized UI components
Will the plugin be used on most pages of application?
If YES → Add to global bundle in plugins.js
If NO → Add as custom plugin in resources/mix/vendors/
