Skip to content

Duplicated css in output with v4.2 vs v3.1 #55

@crisward

Description

@crisward

After updating to 4.2 I saw a massive increase in bundle size for our css. When checking the content it looks like the css had been added to the output file multiple times.

Dependency Versions

Rollup

import svelte from 'rollup-plugin-svelte';
import css from 'rollup-plugin-css-only'
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import injectProcessEnv from 'rollup-plugin-inject-process-env';
import outputManifest from 'rollup-plugin-output-manifest';
import json from "@rollup/plugin-json";

export default [
  {
    input:'./client/admin.js',
    output: {
      sourcemap: process.env.NODE_ENV != "production",
      format: 'es',
      name: 'app',
      dir: 'storage/public/resources/site_tmp',
      manualChunks: undefined
    },
    plugins:[
       svelte({ emitCss:true }), 
       resolve({ browser: true, dedupe: ['svelte'] }), 
       commonjs(), 
       json(),
       css({ output: cssFilename }),
       injectProcessEnv({'NODE_ENV': process.env.NODE_ENV == "production" ? 'production' : 'development' }),
       outputManifest({isMerge:true})
    ]
  }
bundle 4.2 Size 3.1 Size Number of duplicates
admin.css 146kb 106kb 2
editor.css 812kb 147kb 18
site.css 743kb 101kb 15

The number of duplicate copies of the css seems related to the number of dynamic import() statements used within the specific bundle.

Hope that helps you reproduce and fix this issue.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions