btd / rollup-plugin-visualizer

📈⚖️ Visuallize your bundle
MIT License
1.89k stars 56 forks source link

\x00 character in filenames using list template #190

Closed hervegareste closed 7 months ago

hervegareste commented 7 months ago

Hi, Working on ubuntu 20, node 18, I export list template reports using this configuration in my vite.config.js :

import { visualizer } from 'rollup-plugin-visualizer'
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import Checker from 'vite-plugin-checker'
import { ViteMinifyPlugin } from 'vite-plugin-minify'
import eslint from 'vite-plugin-eslint'

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        react(),
        Checker({ typescript: true }),
        eslint(),
        ViteMinifyPlugin(),
        visualizer({
            template: 'list',
            gzipSize: true,
            brotliSize: true,
            filename: 'reports/bundle-report.txt',
        }),
    ],
    server: {
        proxy: {
            '/api': {
                target: 'http://localhost:8080',
                changeOrigin: true,
            },
        },
        open: true,
        port: 3000,
    },
    build: {
        outDir: 'build', // build folder
        sourcemap: false, // to ensure sourcemap are not generated even if the default change in futur version
        minify: true, // to ensure JS is minified even in futur version
        rollupOptions: {
            output: {
                manualChunks: {
                    mui: [
                        '@mui/icons-material',
                        '@mui/lab',
                        '@mui/material',
                        '@mui/styles',
                        '@mui/x-data-grid-pro',
                        '@mui/x-date-pickers-pro',
                    ],
                },
            },
        },
    },
})

I discovered that my output file contains a \x00 char at the beginning of some (always the same) filenames. Opening the report with vi, there are '^@' at the beginning of some names. Opening it with a text editor, the file is not readable (full of ideograms).

assets/date.formatter-OXGDuiJC.js:
  /src/misc/formatters/date.formatter.ts:
    rendered: 523
    gzip: 170
    brotli: 149
assets/exceljs.min-2QroBWrX.js:
  /node_modules/exceljs/dist/exceljs.min.js:
    rendered: 942732
    gzip: 255626
    brotli: 201422
  ^@/node_modules/exceljs/dist/exceljs.min.js?commonjs-module:
    rendered: 34
    gzip: 54
    brotli: 38
  ^@commonjs-dynamic-modules:
    rendered: 252
    gzip: 194
    brotli: 138
....

image

I tried to understand where this char is added, but could not find. All I know is that when I print the bundle variable in index.ts line 200, it is already present. A simple solution would be to call replace('\0', '') on file const line 103 of render-template.ts, even if it does not fix the original problem.

btd commented 7 months ago

\u0000 added by rollup and its own plugins when they need to create synthetic import. Most common example you see it is commonjs plugin.

You can see it in their tests for example https://github.com/rollup/plugins/blob/2a19079892f0bef53b557da965339cdef0a13a93/packages/commonjs/test/fixtures/form/multi-entry-module-exports/output1.js#L2