search

microsoft / ApplicationInsights-JS

Microsoft Application Insights SDK for JavaScript
MIT License
650 stars 240 forks source link

[BUG] Bundle size is (still) large #1864

Closed thdepauw closed 2 years ago

thdepauw commented 2 years ago

Description/Screenshot

image

I recently started a vue3 application and was looking into application insights bundle size as in my past experience it is pretty large compared to some UI frameworks. I found that the following issues (#1234 , #1076 ) adres this are closed and marked as released (if I interpret that correctly)

Unfortunately, if I start a new clean vue3 vite project and add application insights I get an extra 642KB rendered (159KB gzip).

So I was wondering :

Steps to Reproduce

Add AI

// App.vue
import { onMounted } from "vue";
import { ApplicationInsights } from "@microsoft/applicationinsights-web";

onMounted(() => {
  const appInsights = new ApplicationInsights({
    config: {
      connectionString:
        "<your-ai-connection-string>",
    },
  });
  appInsights.loadAppInsights();
  appInsights.trackPageView();
  appInsights.trackEvent({ name: "App mounted" });
});

Add [bundle analyser](https://github.com/btd/rollup-plugin-visualizer)

//vite.config.ts
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import { visualizer } from "rollup-plugin-visualizer";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(), visualizer({ template: "treemap", gzipSize: true })],
});

Note: if you change the template to network you can see that not much is treeshaken.

build and inspect

Expected behavior

Smaller size

Additional context

Node: 16.16

Exact package.json of my test:

  "dependencies": {
    "@microsoft/applicationinsights-web": "^2.8.5",
    "vue": "^3.2.37"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^3.0.1",
    "rollup-plugin-visualizer": "^5.7.1",
    "typescript": "^4.6.4",
    "vite": "^3.0.3",
    "vue-tsc": "^0.38.4"
  }
MSNev commented 2 years ago

Hi @thdepauw, At this point in time -- unfortunately yes, there are no more plans to try and reduce the SDK any further as based on the last 18 months of effort there is now very few possible gains left. See for the current state https://github.com/microsoft/ApplicationInsights-JS/tree/master/AISKU#cdn-version-release-summary-with-size-tracking.

You can see that while v2.6.0 achieved a significant change, with all of the new functionality, features and backward compatibility support required while the full SDK has continued to increase (significantly) we have managed to keep the minified version around the same size.

The next round of size investigates are now not scheduled until v3.x.x (which we plan to start releasing beta releases for in the coming months), There will be several breaking changes (as we remove some of the backward compatibility support) including dropping IE8 (ES3) and the internal polyfill's to support it. But, we also have some major features being added, like dynamic configuration updates.... So at this point in time I don't have a feel for what the size improvements may (or may not) be.

If you want the full Ajax and web feature support, then there is not a lot of paths forward to reduce the size. While the @microsoft/applicationinsights-web is a complete package, it would be technically possible to try and construct you own package (it won't be fun) to remove any of the code that is referenced (and initialized) that you don't need. we have the AI Basic SKU which provides just the basic bare bones necessary to be able to send telemetry, but it doesn't include a lot of the automatic tracking (by default -- you can add individual components).

Also please make sure that you are following the TreeShakingRecommendations and any library / support utilities you are using also follow these as that will enable your build system to remove all of the unused backward compatibility support code.

MSNev commented 2 years ago

Additional Note: Looking at you image and the sizes listed, it seems that the 642.35kb is including the full Raw (unminified) code -- with comments... The CDN sizes listed in the size tracking is the full SKU (packaged with Rollup and full tree-shaking) is Full = the full @microsoft/applicationinsights-web source code (with most comments removed) Raw Minified = Full minified with Uglify-JS v3 GZip Size = The Raw Minified size downloaded from the CDN using the CDN's GZip compression.

So you should be able to get a similar size (while still not as small as I'd like), it is considerably better that the depicted sizes.

thdepauw commented 2 years ago

Hi @MSNev , thank you for the detailed feedback. I can see why the size is what it is when having to deal with backward compatibility and older ES version support. We probably stick with the latest version and look forward to version 3.x.x.

Thanks for pointing out the AI Basic SKU, this could be an option if we really want to scrape of the size. But, as you mentioned, this won't be a fun/easy task.

On your additional note, good that you point that out! I did some further digging and noticed the bundle analyzer doesn't take the minified size into account. It does give a good sense of size of the general code base, but not when it comes to final shipping size. If you add the following to the vite.config.ts it will split @microsoft/applicationinsights-web into a separate bundle and give a proper size representation:

  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          appInsights: ['@microsoft/applicationinsights-web'],
        },
      },
    },
  }

This wil than give the following result when running npm run build again:

image

This is more in line with size tracking that you mentioned (even a little bit smaller).

Even though this is 2x the size of the app itself, we'll stick with it for now.

github-actions[bot] commented 1 year ago

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.