webpack/mini-css-extract-plugin
Mini Css Extract Plugin
这是一个 Webpack 扩展，用于将 CSS 从 JavaScript 文件中提取到独立的样式表中，以用于生产构建。它作为一个 CSS 打包器和资产优化器，将样式与脚本包分离，以实现并行加载并防止出现无样式内容闪烁（FOUC）。
该项目提供了用于生成将本地样式定义映射到应用程序组件的 JavaScript 模块导出的实用工具。它还通过资源查询条件加载不同的 CSS 变体来实现动态主题管理，并支持通过使用内容哈希文件名进行长期浏览器缓存。
能力领域涵盖了通过异步按需样式获取进行的前端性能调优，以及服务端渲染（SSR）优化，包括样式内联和重复标签预防。该工具还支持具有热模块替换（HMR）的开发工作流，以实现即时样式更新。
该插件集成到 Webpack 构建流水线中，并提供用于输出文件名模式和生命周期钩子的配置选项，以定制样式链接标签的生成。
Features
- Build-Time CSS Extraction - Extracts CSS from JavaScript bundles into separate standalone files to enable parallel loading.
- CSS Bundlers - Extracts styles from JavaScript bundles into standalone CSS files to enable parallel loading.
- CSS Optimization - Optimizes CSS delivery by extracting styles from JS to enable parallel loading and prevent FOUC.
- CSS Bundle Extractions - Migrates styles out of JavaScript bundles into standalone CSS files for improved production performance.
- Webpack Build Pipelines - Integrates into the Webpack build pipeline to coordinate the extraction and bundling of CSS assets.
- CSS Modules - Generates JavaScript module exports that map local style definitions to application components.
- Frontend Performance Optimization - Reduces initial page load times through asynchronous stylesheet loading and content-hashed caching.
- Bundler Entry Points - Groups extracted styles into separate files based on application build entry points.
- Output Path and Naming Customizations - Allows customization of output paths and filename patterns for extracted style files and chunks.
- Hot Module Replacement - Updates styles in the browser instantly during development without requiring a full page refresh.
- Asset Filename Hashing - Generates unique filenames based on content hashes to ensure efficient long-term browser caching.
- Long-Term Version Caches - Supports long-term browser caching by appending unique content hashes to extracted CSS filenames.
- On-Demand Style Loading - Triggers the loading of corresponding CSS files only when the associated JavaScript chunk is requested.
- Dynamic Theme Switching - Enables switching between different visual themes conditionally via build-time query parameters.
- Dynamic Theming - Implements dynamic theming by conditionally loading CSS variants using resource queries.
- Server-Side Style Inlining - Emits style definitions directly into the initial HTML response to prevent flashes of unstyled content.
- CSS Bundle Consolidation - Merges extracted styles into a single global file using chunk optimization for simplified delivery.
- Resource-Query Theme Resolution - Uses import query parameters to conditionally select and load different CSS theme variants during the build.
- Stylesheets - Loads stylesheets in the background to improve initial page load speed and reduce render-blocking.
- Asynchronous Module Loading - Implements asynchronous loading of CSS stylesheets in coordination with JavaScript module chunks.
- Server-Side Rendering - Provides utilities to optimize style definitions and prevent redundant tags during server-side rendering.
- SSR Performance Optimizations - Emits style definitions optimized for server-side rendering to improve perceived initial load speed.
