第四章：高级特性与最佳实践 - 第四节 - Tailwind CSS CSS 提取和打包优化-监控与分析

包体积分析

// webpack.config.js
const {BundleAnalyzerPlugin} = require('webpack-bundle-analyzer')

module.exports = {
    plugins: [
        new BundleAnalyzerPlugin({
            analyzerMode: 'static',
            reportFilename: 'css-bundle-report.html',
            openAnalyzer: false,
            generateStatsFile: true,
            statsFilename: 'css-bundle-stats.json'
        })
    ]
}

性能监控

// webpack.config.js
module.exports = {
    performance: {
        hints: 'warning',
        maxAssetSize: 250000,
        maxEntrypointSize: 250000,
        assetFilter: function (assetFilename) {
            return assetFilename.endsWith('.css')
        }
    }
}