Bundle bundling all its dependencies with Webpack

Exploring webpack for the first time in my Vue project created using the vue cli. After examining the webpack bundle (produced in production mode with vue-cli-service build) through webpack-bundle-analyzer, I noticed that the file bn.js is included multiple times in the bundle. Upon running npm ls bn.js, I discovered that its parent dependency is actually webpack itself.

`-- <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4c3b292e3c2d2f270c78627878627d">[email protected]</a>
  `-- <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="cfa1a0abaae2a3a6adbce2adbda0b8bcaabd8ffde1fde1fe">[email protected]</a>
    `-- <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3e5d4c474e4a51135c4c51494d5b4c5758477e0d100f0c100e">[email protected]</a>
      +-- <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1173637e666274637877683c6278767f51253f233f20">[email protected]</a>
      | +-- <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8ceee2a2e6ffccb9a2bda2bf">[email protected]</a>
      | +-- <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="eb8999849c988e99828d92c699988aabdfc5dbc5da">[email protected]</a>
      | | `-- <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="690b0747031a295d4758584750">[email protected]</a>
      | +-- <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="92f7fefefbe2e6fbf1d2a4bca7bca1">[email protected]</a>
      | | `-- <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6d0f0343071e2d59435c5c4354">[email protected]</a>
      | `-- <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bbcbdac9c8de96dac8d58afb8e958a958d">[email protected]</a>
      |   `-- <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b8d9cbd68996d2cbf88d968c9689">[email protected]</a>
      |     `-- <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f69498d89c85b6c2d8c7c7d8cf">[email protected]</a>
      +-- <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b2d1c0d7d3c6d79fd7d1d6daf2869c829c86">[email protected]</a>
      | `-- <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6d0f0343071e2d59435c5c4354">[email protected]</a>
      +-- <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4c28252a2a25296124292020212d220c79627c627f">[email protected]</a>
      | +-- <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="53313d7d392013677d62627d6a">[email protected]</a>
      | `-- <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="14797d78787166396675767d7a54203a243a25">[email protected]</a>
      |   `-- <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ed8f83c3879eadd9c3dcdcc3d4">[email protected]</a>
      `-- <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="700005121c19135d151e130209000430445e405e43">[email protected]</a>
        `-- <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="264448084c556612081717081f">[email protected]</a>

My question is why webpack is bundling its own dependencies in the final bundle, considering that webpack is listed as a devDependency (was previously a dependency before being changed to devDependency) in the project?

If this is expected behavior, please direct me to any documentation or resources explaining this behavior.

javascriptvue.jsnpmwebpackwebpack-bundle-analyzer

Answer №1

It seems that the issue I was facing was related to npm. Initially, I had webpack listed as a dependency in my package.json. To convert it into a dev dependency, I first executed npm uninstall webpack --save and then followed it up with npm install webpack --save-dev. However, this did not resolve the problem entirely. Only after I removed my node_modules folder and performed a fresh npm install did I stop experiencing issues with webpack dependencies not being included in my bundle.

Answer №2

One trick I used to identify which framework was causing issues was in my Webpack configs. By setting {node: false} and then building the production code, Webpack would highlight the problematic framework. This can become an issue for code originally designed for server side use, as certain packages may be expected to be available but do not appear in package-lock.json.

If you're working with something like create-react-app, consider using a tool like react-app-rewired to tailor your Webpack configs.

Happy hunting for unused code!

Answer №3

I encountered a similar issue where I couldn't understand why certain libraries like bn.js and elliptic were being imported into my project.

It turned out that a library called [generate-password][1] was indirectly importing the crypto module, leading to the inclusion of unneeded modules in my project. You can see an example in the image below.

https://i.sstatic.net/QPMpG.png

If you ever come across a situation where you're unsure about the import statements for a particular library in your codebase, simply run:

npm ls libname

https://i.sstatic.net/AMSxW.png

There are instances where libraries import certain methods internally, causing unnecessary bloat in your code bundle. In the case of generate-password, it was importing the crypto module from node, resulting in the entire module being included in the vendor bundle just for one function.

Here's how I avoided importing crypto:

  1. I copied the generate-password source code into my project as a utility.
  2. I replaced the randomBytes function from the crypto library with a specific npm version of randomBytes.
  3. I removed node_modules and rebuilt using yarn/npm.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Typescript implementation for a website featuring a single overarching file alongside separate files for each individual webpage

Although I've never ventured into the realm of Typescript before, I am intrigued by its concept of "stricter JS". My knowledge on the subject is currently very limited as I am just starting to experiment with it. Essentially, I have developed my own ...

javascripttypescript

Navigating to the present child state with modified parameters can be achieved using the following steps

Check out this demo: https://jsfiddle.net/explorer/622qzqsc/ In the platform I'm working on, we have an advanced concept of state management, specifically for building timelines. In the template of this system, there's a code snippet (which is c ...

javascriptangularjsangular-ui-router

Leveraging the power of Firebase and JavaScript to easily include custom user fields during the user

UPDATE: I encountered an issue while using Nextjs framework. However, it works perfectly fine when I use a vanilla CRA (Create React App). It appears that the problem is somehow related to Nextjs. I'm currently working on creating a new user document ...

javascriptfirebasegoogle-cloud-firestorefirebase-authenticationnext.js

Steps for adjusting npm directory pathHow to modify the location

Although all my npm packages are functioning properly, the npm package list appears to be empty. I suspect there is an issue with the path but I am uncertain how to resolve it. Running which gulp returns: [~] ruby-2.2.3 $ which gulp /usr/local/bin/gulp ...

npm

Exploring potential arrays within a JSON file using TypeScript

Seeking guidance on a unique approach to handling array looping in TypeScript. Rather than the usual methods, my query pertains to a specific scenario which I will elaborate on. The structure of my JSON data is as follows: { "forename": "Maria", ...

javascriptarraysjsontypescript

Is it possible to dispatch an async action when a route changes in React Router and Redux?

I am working on a universal react app with redux and react-router integration. My app has multiple routes such as: /2016 /2015 /2014 /2013 and so on. Each route requires fetching data from an API. Currently, I am using <Link> elements in the Navi ...

javascriptreactjsreact-routerredux

What is the best way to access the EXIF data of an image (JPG, JPEG, PNG) using node.js?

In my quest to access the EXIF data of an image in order to extract GPS information such as Latitude and Longitude, I have experimented with approximately 4-5 EXIF packages available on npm/node, including exif, exif-parser, node-exif, exifr, exif-js, and ...

javascriptnode.jsnpmexifnpm-package

Trouble with triggering HTML5 FileReader() functions

I'm having trouble determining why neither readSuccess() nor readFailure() are being executed in the code snippet below: function readMyFile(){ var reader = new FileReader(); reader.onload = readSuccess; reader.onerror = readFailure; ...

javascripthtml

Adding External Libraries to Angular-CLI: Expanding Your Toolkit with jQuery and Bootstrap

Right now I have to: Install local libraries using npm install bootstrap and npm install jquery Create a folder called src\assets Copy all files from node_modules/bootstrap and node_modules/jquery In index.html <script src="assets/jquery/jquery ...

angularnpmangular-cli

Positioning of dropdown in Material UI select component

Unfortunately, I am encountering an issue with the Menuprops attribute and cannot seem to adjust the position of the drop-down box. Despite following the instructions from other similar queries, the desired outcome remains unachieved. My goal is to have t ...

javascriptreactjsmaterial-uimaterial-design

Tips for customizing the WooCommerce product page

If you want to customize the layout of a WooCommerce product page, you can override the template by copying the WooCommerce template folder into your theme. You can find step-by-step instructions here. I am looking to change the layout of a WooCommerce pr ...

javascriptphpcsswordpresswoocommerce

Loop through an array of arrays in JavaScript. If a match is found, add it to an existing inner array. If not, create a new

I am currently extracting data from a database, and here is a simplified representation of the information: var example = [ {'start': 1966, 'end': 1970}, {'start': 1969, 'end': 1971}, {'start&ap ...

javascriptarraysjsonloopsobject

Creating formGroups dynamically for each object in an array and then updating the values with the object data

What I am aiming to accomplish: My goal is to dynamically generate a new formGroup for each recipe received from the backend (stored in this.selectedRecipe.ingredients) and then update the value of each formControl within the newly created formGroup with t ...

javascriptangulartypescriptangular-reactive-forms

Ways to shift text upwards while scrolling in a downward direction?

I'm a beginner with jQuery and I could use some assistance. My goal is to have the text move upwards and a static box slowly disappear as you scroll down the website. Something similar to what you see here: p, body { margin: 0; padding: 0; } b ...

javascriptjqueryhtmlcss

The conversion of a newline in an Angular page is done using &lt;br/&gt tag

Here is a function I have: setLocalVariableOnAccepted(ogp, hb, responseJson) { if (responseJson.ofgp === undefined) { this.ogpStatus = 'orange'; this.ogpStatusMsg = responseJson.ofgp + ', <br/> No change. Previous va ...

javascripthtmlangularnewline

Use jQuery to compare the input values whenever they are modified

I am trying to synchronize the input values of two inputs as they are typed in. The code I have seems to work sometimes, but not consistently. Here is the code snippet: $('#google-querynav').keypress(function() { var text = $(this).val(); ...

javascriptjqueryinput

What could be the reason behind the error message 'No Bower components found' when running 'grunt serve'?

Starting an Angular app using angular-fullstack on my Windows 7 machine has been a bit of a challenge. I installed several npm packages globally, including grunt-bower-install. To create the application, I used the following command: yo angular-fullstac ...

angularjsnpmbower

Tutorial on React JS and Python Django: Understanding the concept of an infinite loop in componentDidUpdate

I'm currently going through an online video tutorial that teaches how to create a CRUD full-stack app using React, Django, and SQLite. However, I've encountered an issue with fetching table data causing an infinite loop. It appears that the probl ...

javascriptreactjsdjangosqlite

Create a hover effect on HTML map area using CSS

Is it possible to change the background color of an image map area on hover and click without using any third-party plugins? I attempted the following code: $(document).on('click', '.states', function(){ $(this).css("backgro ...

javascripthtmljquerycsshtml5-canvas

create-react-app: Troubleshooting the Invalid tar header problem when creating a new app

Every time I try to run the script, I keep encountering an "invalid tar" error (see image below). https://i.sstatic.net/Mq4Ep.png This used to work without any issues in the past. However, now that I am starting a new project, it keeps failing. Below are ...

npmcreate-react-app