There's no questions about it: in the age of "fat" frontend clients, less bloat is better. A useful technique is to split off large libraries into separate Webpack chunks so the they don't take up space in your main bundle, delaying the initial load of your webapp. I like doing this with what I call the "installer pattern". Every split-out library gets its own "installer", an async function that loads the Webpack chunk, performs any initializations or configuration necessary, and then informs the relevant parts of your app that loading has completed.
Here's what that pattern looks like for installing the Sentry.io error reporting SDK:
First, add Sentry to your project:
yarn add @sentry/browser @sentry/integrations
# Using npm
$ npm install @sentry/browser @sentry/integrations
Next, create a new file exporting an async function that will load Sentry from it's own Webpack chunk:
// installSentry.js
import Vue from 'vue';
const SENTRY_DSN = 'https://*****@sentry.io/****' // Find your DSN on the Sentry Console: https://sentry.io/settings/<team>/projects/<project_id>/keys/
async function installSentry() {
const Sentry = await import(/* webpackChunkName: 'sentry' */'@sentry/browser');
const Integrations = await import(/* webpackChunkName: 'sentry' */'@sentry/integrations');
Sentry.init({
dsn: SENTRY_DSN,
integrations: [new Integrations.Vue({Vue, attachProps: true, logErrors: true})],
});
}
export default installSentry;
Finally, in your main.js
, import and call the installer function when in production
:
// main.js
import installSentry from "@/installers/installSentry.js";
if(process.env.NODE_ENV === "production") installSentry();
The Sentry SDK now loads in it's own Webpack chuck and does not bloat our main bundle.
And how do you call Sentry methods? You have a utility method for each Sentry method and import the package in each utility method?
Another question: do you handle errors thrown before Sentry initialization?