Size optimization

[GuillQuirin]

Hi everyone,

I'm discovering MediaChrome and was wondering how to reduce as much as possible its size when building a production file.

I've created a small project to test with just a Mute button feature, but on the compilation, I still see optional features included (PiP, AirPlay.....).

import "media-chrome";

function createPlayer() {
    const mediaController = document.createElement('media-controller');

    //Video
    const video = document.createElement('video');
    video.slot = "media"; //Required
    video.src = 'https://www.w3schools.com/html/mov_bbb.mp4';
    mediaController.appendChild(video);

    // Contrôles
    const buttons = [
        "media-mute-button"
    ];
    const controlBar = document.createElement('media-control-bar');
    buttons.forEach(feature => {
        controlBar.appendChild(document.createElement(feature));
    });
    mediaController.appendChild(controlBar);

    document.getElementById('player-container').appendChild(mediaController);
}

createPlayer();

How can I manage to filter correctly the feature I need ?

FYI: I'm using Vite in order to treeshake.

import { defineConfig } from 'vite';
import path, { format, resolve } from 'path';
import terser from '@rollup/plugin-terser';
import { visualizer } from 'rollup-plugin-visualizer';

export default defineConfig({
    build: {
        lib: {
            entry: path.resolve(__dirname, 'src/app.js'),
            name: 'Player',
            fileName: (format) => `player.${format}.js`,
            formats: ['es']
        },
        rollupOptions: {
            treeshake: 'recommended',
            plugins: [
                terser({
                    ecma: 2020,
                    mangle: true,
                    toplevel: true,
                    compress: {
                        passes: 2,
                    }
                }),
                visualizer({ open: true })
            ]
        },
        sourcemap: false,
    },
    server: {
        port: 3000,
        watch: { usePolling: true },
        host: true,
        hmr: true
    }
});

Thank you : )

[GuillQuirin]

Edit : I discovered the "sourcemap" was included in my compiled file (even if set to false) because it was on ES format. On CJS it's better though.

But still I'm around 150kb now. It's quite surprising such a size compared to the distant library (https://cdn.jsdelivr.net/npm/media-chrome@4/+esm) and its 33.4kb).

[GuillQuirin]

I realized my Vite dev app adds a sourceMappingUrl without my consent.
If I load my script file alone, it's much better 👍