no-op.js very large in Webpack v3 bundle

[Jason Kurian]

This might be a red herring, and a completely invalid issue, but I have been wondering about it for a while so I need to ask.

In my project, we are using bootstrap v3.3.7, bootstrap-loader v2.1.0, and webpack v3.5.4 with the following

.bootstraprc file:

---
# Output debugging info
# loglevel: debug

# Major version of Bootstrap: 3 or 4
bootstrapVersion: 3

# If Bootstrap version 3 is used - turn on/off custom icon font path
useCustomIconFontPath: false

# Webpack loaders, order matters
styleLoaders:
  - style
  - css
  - sass

# Extract styles to stand-alone css file
# Different settings for different environments can be used,
# It depends on value of NODE_ENV environment variable
# This param can also be set in webpack config:
#   entry: 'bootstrap-loader/extractStyles'
extractStyles: false
# env:
#   development:
#     extractStyles: false
#   production:
#     extractStyles: true


# Customize Bootstrap variables that get imported before the original Bootstrap variables.
# Thus, derived Bootstrap variables can depend on values from here.
# See the Bootstrap _variables.scss file for examples of derived Bootstrap variables.
#
preBootstrapCustomizations: ../app/assets/stylesheets/bootstrap-variables.sass


# This gets loaded after bootstrap/variables is loaded
# Thus, you may customize Bootstrap variables
# based on the values established in the Bootstrap _variables.scss file
#
# bootstrapCustomizations: ./path/to/bootstrap/customizations.scss


# Import your custom styles here
# Usually this endpoint-file contains list of @imports of your application styles
#
# appStyles: ./path/to/your/app/styles/endpoint.scss


### Bootstrap styles
styles:

  # Mixins
  mixins: true

  # Reset and dependencies
  normalize: true
  print: true
  glyphicons: true

  # Core CSS
  scaffolding: true
  type: true
  code: true
  grid: true
  tables: true
  forms: true
  buttons: true

  # Components
  component-animations: true
  dropdowns: false
  button-groups: true
  input-groups: true
  navs: true
  navbar: true
  breadcrumbs: true
  pagination: true
  pager: true
  labels: true
  badges: true
  jumbotron: true
  thumbnails: true
  alerts: true
  progress-bars: true
  media: true
  list-group: true
  panels: true
  wells: true
  responsive-embed: true
  close: true

  # Components w/ JavaScript
  modals: false
  tooltip: false
  popovers: false
  carousel: false

  # Utility classes
  utilities: true
  responsive-utilities: true

### Bootstrap scripts
scripts:
  affix: false
  alert: false
  button: false
  carousel: false
  collapse: false
  dropdown: false
  modal: false
  popover: false
  scrollspy: false
  tab: false
  tooltip: false
  transition: false

And webpack entry:

[
  "bootstrap-loader",
  "./app",
]

With this config, webpack-bundle-analyzer tells me that bootstrap-loader/no-op.js is huge:

17KB gzipped from a supposedly 35 raw byte file that does module.exports = {};.

I also took a look at the bundle in the new webpack-dashboard and it reported that bootstrap-loader/no-op.js is 3% of my total bundle size.

At this point I have no clue why this is, and like I mentioned I think it could be a red herring or a bug in the tools I'm using to measure the bundle size.

Any help would be greatly appreciated. Please let me know if I can provide any more information to help investigate. Thanks!

[Stefano Cappa]

@justin808 This guy is right.

I'm Using Angular 4.x.x with Webpack 3.x.x

Dev config:

Prod config but not AOT compiler

Prod config WITH AOT compiler (equals to the previous screenshot but it's not a problem)

Can you config if is this is an issue or not (100K it seems quite big)? Do you need something to reproduce it?

Thanks

[Stefano Cappa]

@JaKXz You said "bootstrap-loader v3.3.7", I suppose bootstrap 3.3.7. :)
Are you using the latest stable version of bootstrap-loader 2 like me?

PS: However I'm using bootstrap 4 beta, so it seems not related to the bootstrap version

[David Furlong]

My bootstrap-sass is even bigger. Any ideas?

[Justin Gordon]

This sounds like a documentation and research issue.

One thing that ShakaCode.com has been doing lots of for clients is minimizing their bundle sizes. If you want personalized help to do that, please consider our ShakaCode Pro Support Plan.

[Jason Kurian]

@justin808 I don't know what you mean by

This sounds like a documentation and research issue.

If you mean this might be a node or webpack issue, blowing up the filesize way bigger than it is, then sure...

But the question here is about bootstrap-loader itself, and why the no-op.js file is in my bundle at all. With respect, I'm not asking for help on minimizing my bundle size, I'm asking about the function of this library. No worries if you don't have answers, this is a really weird issue. Now that I think about it, I should probably have opened it on webpack's issue tracker in the first place.

@Ks89 sorry for the delay in answering your question, I am using v2.1.0

[Judah Meek]

IIRC, the purpose of the no-op.js file is to provide other bootstrap-loader scripts an empty resource object in various webpack queries.

[ignoreswing]

Is there any update on the issue?

I use default setting without changing any config in .bootstraprc.
I get a 671.3KB parsed size for no-op.js...
Even though default setting includes all scripts and styles, the size is still unacceptable.

• webpack setting

module.exports = {
	entry: {
		main: ['bootstrap-loader', './web/js/entry.js'],
	}
}

• Env
  "bootstrap-loader": "^3.0.2",
  "bootstrap-sass": "3.4.1",
  "resolve-url-loader": "~2.3.1"
  "webpack": "^4.28.4",
  (btw, if I change bootstrap-sass to 3.1.1, bootstrap-loader throw error.)

• screenshot
  

[Justin Gordon]

@ignoreswing any idea what's in that part of the bundle? Just CSS?

[ignoreswing]

@ignoreswing any idea what's in that part of the bundle? Just CSS?

Thank you for your reply.
I am sorry I didn't trace the issue further.
bootstrap-loader cause too many peer dependency problem in my case.
Finally, I decide to leave after trying one day.

--
The following is not close to this issue, but I post it to help some other people

I maintain an old project which should use an exactly version of Bootstrap 3.1.1 to prevent regression. If bootstrap-loader is used, I think it is equivalent to import bootstrap-sass V3.1.1
Recently, I update webpack from V2 to V4

What I have met,

• bootstrap-loader 3.0.2 + bootstrap-sass 3.4.1 + resolve-url-loader 3.0.0
  => Module not found (font path is wrong)
  Can't resolve '../bootstrap-sass/assets/stylesheets/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.eot
  => I think is the same issue of #359
  => Solution: use resolve-url-loader 2.3.1 instead

• bootstrap-loader 3.0.2 + bootstrap-sass 3.4.1 + resolve-url-loader 2.3.1
  => Run fine while it have a super big no-op.js bundle
  => Current issue #322 (this post)

• bootstrap-loader 3.0.2 + bootstrap-sass 3.1.1 + resolve-url-loader 2.3.1
  => bootstrap-loader throw error (I forgot the detail)

• bootstrap-loader 2.X.X + bootstrap-sass 3.1.1 + resolve-url-loader 2.3.1
  => Need a peer dependency extract-text-webpack-plugin
  => mini-css-extract-plugin is prefered in Webpack 4