Exclude certain C++ components

When using emscripten, I've noticed that even small C++ files can result in large JavaScript files. For example:

#include <memory>
int main(int argc, char** argv) {
  std::shared_ptr<int> sp(new int);
}

Compiling this with a recent emsdk using a command like

em++ -std=c++11 -s DISABLE_EXCEPTION_CATCHING=1 -s NO_FILESYSTEM=1 \
     -s NO_BROWSER=1 -s NO_EXIT_RUNTIME=1 -O3 -o foo.js foo.cc

The resulting file is over 400k in size. Adding -g allows me to do

grep -n '^function _' foo.js | c++filt -_

to see the functions included. Some examples are:

std::__1::moneypunct<char, false>::do_thousands_sep() const
std::__1::locale::~locale()
std::__1::basic_string<wchar_t, …>::~basic_string()
std::__1::time_get<…>::__get_day(…) const
std::__1::codecvt<wchar_t, char, __mbstate_t>::codecvt(unsigned int)
std::__1::locale::__imp::install(std::__1::locale::facet*, long)
_printf_core

Even though I'm not calling these functions myself, they are included in the JavaScript file, possibly due to virtual function tables or static initializers.

If this was normal code linked to a shared library on my HDD, it would be fine. But having half a megabyte of JavaScript code transferred for a single shared pointer seems excessive. There must be a way to avoid this.

Answer №1

An effective solution was implemented by splitting the C++ library into multiple parts, as detailed here. By separating the code related to I/O and locale into its own library, sections of the code that do not require these functionalities can avoid the static initializer of the I/O subsystem, thus reducing dependency on specific functions. However, it's important to note that this approach will impact the functionality of strstream for clear reasons.


Update: Following the recent commit 301e4ad (introduced in release 1.30.6), the system libraries are now compiled as a static *.a library containing distinct objects, rather than a single *.bc file. Only the necessary objects are linked in, leading to a significant reduction in code size for simpler scenarios.

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

Prevent event bubbling when clicking

I have a code snippet that I'm struggling with. <p>haha</p> <button class="btn btn-light" onclick="nextSibling.classList.toggle('d-none');"> <i class="fa fa-ellipsis-h"></i> </button> <div class= ...

Troubleshooting: Resolving issues with Bootstrap path in subfolders on your website

As a beginner using bootstrap 3, my goal was to create a header that I could easily call on any new page I create. However, I encountered an issue when I tried to place the code from the original file into a new folder with an index.php file. Here is an i ...

The art of designing Mongoose and Router files

Let me share my directory structure with you: bin/ www models/ myMongooseModel.js public/ ... routes/ index.js anotherroute.js views/ ... app.js package.json In my app.js file, I have configured some settings using app.set and app.use comman ...

What steps should I take to ensure that clicking this button triggers the API request and returns the data in JSON format?

I'm attempting to have the button with id 'testp' return an api request in json format, however it seems to not be functioning properly. You can find the HTML code link here: https://github.com/atullu1234/REST-API-Developer-1/blob/main/js-bu ...

Achieving unique proportions with HTML5 video resizing

On my page, I plan to showcase a video specifically for desktop browsers. I have devised some code to determine whether the video is in landscape or portrait orientation. The challenge lies in deciding what to do based on this orientation: If the video is ...

What is the best way to design a Global Navigation menu for websites?

For example, I am looking to integrate a Navigation menu into my website using just one file. I have considered using PHP or creating an HTML frame, but I am wondering what the current industry standard is for professionals. Any insights? ...

implementing conditional logic in angularjs expressions

<p>{{isExisted}}</p> Looking to show either "Active" or "Inactive", but the isExisted variable only returns true or false. Need help with setting up a conditional if else statement to change it to the desired value. ...

Navigate back to the previous route within the Vue router hierarchy

In my Vue application, I have a Settings page with child routes such as settings/user, settings/addUser, etc. I am looking to implement a back button that when pressed, takes the user back to the specific page they visited within the Settings section. Usin ...

Issue encountered while retrieving values from JSON for the data table

I recently developed an application using a combination of React and Flask to display JSON data in a table format. While I can successfully see the data loaded in the console, I encountered difficulties in rendering it within the data table. The technologi ...

Incorporating a specific time to a JavaScript date object

In my Angular application, I am facing an issue with adding a time to a date. The appointmentDate from the date picker returns a JavaScript date while the appointmentTime is selected from a dropdown with options like "8:00", "8:30", "9:00", etc. I'm ...

Challenges encountered when attempting to access files from the filesystem on vercel

Currently, I am working on a website that includes a "blog" section with markdown files. The setup reads the files seamlessly from the file system without any errors... except when deployed on Vercel. In that case, it throws a "No such file or directory" e ...

How can I modify the fill color of a Cell when hovering over a Bar Chart in Recharts?

I have been rendering the chart in the following manner: <BarChart width={868} height={40} data={data} margin={{top:0, bottom: 10, left:0, right:0}} barSize={5}> <Tooltip labelStyle={{ textAlign: &apo ...

Unable to retrieve information stored in an object within a Vue component

I'm having trouble accessing the data within the user object. { "channel_id": 2, "user": { "id": 1, "name": "Clyde Santiago", "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="187c7d606c7d6a7c7d6e28 ...

Free up memory that has been dynamically allocated after swapping its pointer

As a newcomer to C++, I am eager to grasp the concepts of memory management and pointers simultaneously. Imagine having the following code snippet: int* pointer1; int* pointer2; int* pointer3 = new int[some size]; pointer1 = pointer3; std::swap(pointer1 ...

Exploring the syntax of ReactJS state management with setState

Trying to wrap my head around the following syntax in my React app. I am looking to understand how the code inside setState() works. this.getSomePromise().then( // resolve callback function someImg => this.setState(prevState => ( ...

Managing Multiple Operations in Angular Firestore

For the past few weeks, I've been grappling with the theory behind this issue. Despite scouring the internet for solutions, I haven't found anything truly helpful. So, I'm turning to the SO community for the first time. In my Firestore data ...

Trouble encountered in PHP: Generating a file from POST data and initiating download prompt for the user not functioning as intended

On my webpage, users fill out forms and input fields, which are then sent to a PHP page via Ajax and $_POST. The PHP file successfully writes the output to a txt file. However, I'm facing an issue trying to prompt the user to download the file on the ...

When an array object is modified in Vue, it will automatically trigger the get method to validate any

One of the challenges I am facing is related to a button component that has a specific structure: <template> <button class="o-chip border-radius" :class="{ 'background-color-blue': theValue.isSelected, ...

What could be the reason for the failure of the .is(":hover") method?

Here is some code I'm using to fade out certain elements on a webpage if the mouse hasn't moved for a period of time: idleTime = 0; var idleInterval = setInterval(function() { idleTime++; if (idleTime > 1) { var isHovered = $ ...

Every time I click, the click event is getting attached repeatedly through the on method

Here is the HTML code that I am working with: <div class="connect"> <ul> <li><a href="#">Assign a Task</a></li> <li><a attr="viewCard" href="#">View Ca ...