The Rollup packaging process in a production environment

Rollup Packaging Process in Production Environments

Rollup, as a modern front-end build tool, plays a core role in Vite's production environment packaging. Compared to the development environment, production builds require stricter code optimization and resource handling. Below is a complete production-level Rollup configuration example:

// vite.config.js
import { defineConfig } from 'vite'
import legacy from '@vitejs/plugin-legacy'

export default defineConfig({
  build: {
    rollupOptions: {
      input: {
        main: 'src/main.js',
        admin: 'src/admin-panel.js'
      },
      output: {
        manualChunks: (id) => {
          if (id.includes('node_modules')) {
            return 'vendor'
          }
        },
        chunkFileNames: 'assets/[name]-[hash].js',
        entryFileNames: 'assets/[name]-[hash].js',
        assetFileNames: 'assets/[name]-[hash][extname]'
      }
    },
    minify: 'terser',
    terserOptions: {
      compress: {
        drop_console: true
      }
    }
  },
  plugins: [
    legacy({
      targets: ['defaults', 'not IE 11']
    })
  ]
})

Multi-Entry Configuration Strategy

Production environments often require handling multiple entry points. In Rollup, this is configured via the input object:

rollupOptions: {
  input: {
    app: 'src/app.js',
    dashboard: 'src/dashboard/main.js',
    settings: 'src/user/settings.js'
  }
}

The corresponding output directory structure will be automatically generated:

dist/
├── assets/
│   ├── app-abc123.js
│   ├── dashboard-xyz456.js
│   └── settings-def789.js
└── index.html

Code Splitting Best Practices

Effective code splitting can significantly improve loading performance. Here are common strategies:

1. Manual Chunking:

manualChunks: {
  lodash: ['lodash'],
  react: ['react', 'react-dom'],
  charting: ['echarts', 'd3']
}

2. Dynamic Import Auto-Chunking:

// Used in business code
const module = await import('./heavy-module.js')

3. CSS Chunking Configuration:

output: {
  assetFileNames: (assetInfo) => {
    if (assetInfo.name.endsWith('.css')) {
      return 'css/[name]-[hash][extname]'
    }
    return 'assets/[name]-[hash][extname]'
  }
}

Advanced Optimization Techniques

Deep Tree-Shaking Configuration

treeshake: {
  moduleSideEffects: (id) => !/\.css$/.test(id),
  propertyReadSideEffects: false,
  tryCatchDeoptimization: false
}

Precompiled Dependency Handling

optimizeDeps: {
  include: [
    'vue',
    'vue-router',
    'pinia',
    'axios'
  ],
  exclude: ['vue-demi']
}

Performance Tuning in Practice

1. Parallel Processing Configuration:

build: {
  chunkSizeWarningLimit: 2000,
  reportCompressedSize: false,
  rollupOptions: {
    maxParallelFileOps: 4,
    output: {
      sourcemap: false
    }
  }
}

2. Caching Strategy:

cacheDir: 'node_modules/.vite',
persistentCache: true

3. Build Analysis Tool Integration:

import visualizer from 'rollup-plugin-visualizer'

plugins: [
  visualizer({
    filename: 'bundle-analysis.html',
    open: process.env.NODE_ENV !== 'CI'
  })
]

Security Reinforcement Measures

1. Content Security Policy (CSP) Handling:

server: {
  headers: {
    "Content-Security-Policy": "default-src 'self'"
  }
}

2. Dependency Vulnerability Scanning:

npx vite-plugin-inspect

3. Sensitive Information Filtering:

define: {
  __API_KEY__: JSON.stringify(process.env.HIDDEN_API_KEY)
}

Deployment Adaptation Solutions

CDN Path Handling

base: 'https://cdn.example.com/assets/',
build: {
  assetsInlineLimit: 4096
}

Environment-Specific Configuration

// vite.config.js
export default ({ mode }) => {
  const env = loadEnv(mode, process.cwd())
  
  return defineConfig({
    define: {
      __APP_ENV__: JSON.stringify(env.APP_ENV)
    }
  })
}

Monitoring and Logging

1. Build Time Analysis:

import { timing } from 'vite-plugin-timing'

plugins: [
  timing()
]

2. Error Tracking Integration:

rollupOptions: {
  onwarn: (warning, warn) => {
    if (warning.code === 'CIRCULAR_DEPENDENCY') {
      trackBuildWarning(warning)
    }
    warn(warning)
  }
}

Leveraging Modern Browser Features

build: {
  target: 'es2020',
  polyfillModulePreload: false,
  cssTarget: 'chrome80'
}

Corresponding browserslist configuration:

{
  "production": [
    "last 2 Chrome versions",
    "last 2 Safari versions",
    "last 2 Firefox versions",
    "edge >= 16"
  ]
}

Custom Plugin Development Example

Implementing a simple asset fingerprinting plugin:

import { createHash } from 'node:crypto'

export default function assetFingerprint() {
  return {
    name: 'asset-fingerprint',
    generateBundle(options, bundle) {
      for (const [fileName, asset] of Object.entries(bundle)) {
        if (fileName.endsWith('.js')) {
          const hash = createHash('sha256')
            .update(asset.source)
            .digest('hex')
            .slice(0, 8)
          
          asset.fileName = asset.fileName.replace(
            /\.js$/,
            `.${hash}.js`
          )
        }
      }
    }
  }
}