Code Splitting Example

This example demonstrates CSS code splitting for multiple entry points.

Features Tested

• Multiple entry points
• CSS code splitting
• Per-entry CSS output

Configuration

import requireCSS from 'rollup-plugin-require-css'

export default {
  input: ['src/app.js', 'src/admin.js'],
  output: {
    dir: 'dist',
    format: 'es'
  },
  plugins: [
    requireCSS({
      split: true,
      output: (chunk) => `${chunk.name}.css`
    })
  ]
}

Source Code

src/app.js

import './styles/app.css'

export function initApp() {
  console.log('App initialized')
}

src/admin.js

import './styles/admin.css'

export function initAdmin() {
  console.log('Admin initialized')
}

src/styles/app.css

.app-header {
  background: #3b82f6;
  padding: 16px;
}

.app-content {
  max-width: 1200px;
  margin: 0 auto;
}

src/styles/admin.css

.admin-panel {
  background: #1f2937;
  color: white;
}

.admin-sidebar {
  width: 250px;
  min-height: 100vh;
}

Try It

cd examples/code-splitting
pnpm install
pnpm run build

Output

dist/
├── app.js
├── app.css
├── admin.js
└── admin.css

dist/app.css

.app-header {
  background: #3b82f6;
  padding: 16px;
}

.app-content {
  max-width: 1200px;
  margin: 0 auto;
}

dist/admin.css

.admin-panel {
  background: #1f2937;
  color: white;
}

.admin-sidebar {
  width: 250px;
  min-height: 100vh;
}

Shared CSS

When multiple entries share CSS, you can configure shared chunks:

requireCSS({
  split: true,
  output: (chunk) => {
    if (chunk.isEntry) {
      return `${chunk.name}.css`
    }
    return `shared/${chunk.name}.css`
  }
})

Try Online

• StackBlitz
• CodeSandbox