CSS 优化策略之webpack插件压缩CSS体积

最新推荐文章于 2025-04-05 15:03:19 发布

找到Web

最新推荐文章于 2025-04-05 15:03:19 发布

阅读量1.7k

点赞数

分类专栏： CSS世界文章标签： webpack

本文链接：https://blog.youkuaiyun.com/wuchen092832/article/details/108426544

版权

本文介绍了如何使用webpack的mini-css-extract-plugin和optimize-css-assets-webpack-plugin来优化和压缩CSS文件，以减小生产环境中的文件大小。通过配置这两个插件，可以有效删除CSS中的注释、空白和缩进，实现minification。同时，文章提醒在使用optimize-css-assets-webpack-plugin时，可能需要调整UglifyJsPlugin的配置以确保JS的压缩效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS 优化策略之webpack插件压缩CSS体积

对于CSS文件中包含的不必要的字符，例如注释、空白和缩进，我们可以在生产环境中将其删除，以达到减小文件大小的目的，这种技术也叫minification。而这些可以利用webpack构建工具进行实现。

mini-css-extract-plugin

提取CSS

安装插件：

npm install --save-dev mini-css-extract-plugin

webpack.config.js 配置

 const MiniCssExtractPlugin = require('mini-css-extract-plugin')

// css,scss,sass,less
{
   
    test:/\.(sa|sc|c)ss$/,
    use: [
      process.env.NODE_ENV === 'development' ? 'style-loader': MiniCssExtractPlugin.loader,
      'css-loader',
      'sass-loader'
    ]
}

//最后对应环境下的plugins中
plugins: [
  new MiniCssExtractPlugin({
   
    filename: "[name].css