Get 2024 Templates Mega Bundle!$1000 worth of 19 Bootstrap HTML, Vue & React Templates + 3 Vector Sets for just $99
Get for 99$

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

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


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 (3)


No problem. Glad it works. happy

Thanks



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

Ahhh thank you Faizal, You rock man .

Specially the CSS section.

Thank you sooo much.


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