Super Sale Limited Time 50% OFF for All-Access Plans
Save 50% Now
Light
Dark
System
Ask  Question

Plugin bundle js size


Hi keenthemes, i posted the question here https://devs.keenthemes.com/question/plugin-bundle-js-optimization, since I didn't want to make a new post, but apparently you didn'"t see it.

I use webpack, and deleted a lots of 3 parties and global plugins

I followed the video that you gave on that forum question. But I'm in the same situation, where I uncomment those lines in "gulp.config.js", but the size of the bundles are still the same.

After a while I delete lines in "package.json" and thinking that it is the file responsible for the webpack. but nothing changed in the bundles files size.

I tracked those files :

"""CSS"""
'assets/plugins/global/plugins.bundle.css' --> 399 kb
'assets/css/style.bundle.css' --> 1283 kb

"""JS"""
'assets/plugins/global/plugins.bundle.js' --> 3805 kb
'assets/js/scripts.bundle.js' --> 214 kb

after all attempts and deleting the destination folders, the new generated bundles above are the same.

Can you please make a video on how to strip and low down the bundle size wit WEBPACK.

thank you

-------------


user
riterix 4 years ago
Webpack Metronic
3 Answers
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (3)

user
Faizal Author 4 years ago

No problem. Glad it works. happy

Thanks


user
Faizal Author 4 years ago

Hi riterix,

Below is the source files list used to generate the output bundle files using the Webpack build tool. You can look at each file and remove file imports that you do not use in your project.

assets/plugins/global/plugins.bundle.css

  • /html/tools/webpack/plugins/plugins.scss
  • /html/demo1/src/sass/vendors/plugins/_plugins.scss




assets/css/style.bundle.css
  • /html/demo1/src/sass/components/components.scss

  • In the file /html/demo1/src/sass/style.scss, you can remove below import as it may not necessary.

    @import "layout/docs/layout";





assets/plugins/global/plugins.bundle.js
  • /html/tools/webpack/plugins/plugins.js




assets/js/scripts.bundle.js
  • /html/tools/webpack/scripts.demo1.js




Thanks
user
riterix 4 years ago

Ahhh thank you Faizal, You rock man .

Specially the CSS section.

Thank you sooo much.


Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(