Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

193
Visualizações
How to get ONLY the bundle file size of a Webpack build without all the extra stuff

I need to get the bundle file size as a command output or have it written to a file.

I've considered the webpack-bundle-analyzer, but the command and JSON file output seems to be doing so much that is irrelevant for my use case.

I've also considered the bundlesize package but it mostly does a comparison check and reports the fail or success status as the command output.

If anyone has any ideas on what relevant tools, commands, or flags can help accomplish this. It'll be greatly appreciated.

Cheers

over 4 years ago · Santiago Trujillo
2 Respostas
Responde à pergunta

0

If you are looking for something very specific. You can try creating your own plugin code to extract what you need.

class PluginGetFileSize {
  private file: string;

  constructor(file: string) {
    // receive file to get size
    this.file = file; 
  }
  apply(compiler: any) {
    compiler.hooks.done.tap(
      'Get File Size',
      (stats: any) => {
        // Get output file
        const file = stats.compilation.assetsInfo.get(this.file); 
        
        // Verify if file exists
        if (!file)
          return console.log('File not exists');

        // Get file size
        const fileSizeInBytes = file.size;

        // only used to convert
        const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB']; 

        // Get size type
        const sizeType = parseInt(Math.floor(Math.log(fileSizeInBytes) / Math.log(1024)).toString());

        // Get size of file using size type
        const size = Math.round(fileSizeInBytes / Math.pow(1024, sizeType));

        // Here you can log, create a file or anything else
        console.log(`${this.file} has ${size} ${sizes[sizeType]}`);      
      }
    );
  }
}

For this simple example, i only need to pass one file path to use the plugin but if you need, you can pass more files here.

module.exports = {
  //...
  plugins: [
    new PluginGetFileSize('YOUR-OUTPUT-FILE.js'),
  ],
};

I believe there must be some packages with similar functions like:

  • size-plugin
  • webpack dashboard you can learn more about this here
  • webpack analyse
  • bundlephobia to visualize your dependencies size in a simple way
  • webpack visualize
  • webpack-bundle-analyzer that you brought yourself
  • lighthouse use to analyze your entire application in different aspects
over 4 years ago · Santiago Trujillo Relatório

0

Also, check out webpack official docs Bundle Analysis section. Especially if using webpack 5, as some common tools still not supporting it.

bundle-stats is a great tool.

over 4 years ago · Santiago Trujillo Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda