Webpack 如何抽离、压缩 CSS 文件？

2024-06-02 04:08:04

关于抽离、压缩 css 文件，主要目的是为了减小体积，提升性能。

如果为本地使用，仅需配置 style-loader 和 css-loader 即可。css-loader 解析 .css 文件为 css，style-loader 把 css 代码插入到页面中。

module:{rules:[{test: /\.css$/,// loader 的执行顺序是：从后往前//css-loader：.css文件解析为css；style-loader：把它插入到页面中；loader: ['style-loader', 'css-loader']    },]
}

如果是线上环境，需要配置 webpack.prod.js 中内容。具体配置过程如下：

1、配置 loader

此步需要借助插件 mini-css-extract-plugin 去配置

//安装插件
const MiniCssExtractplugin = require('mini-css-extract-plugin')

通过 MiniCssExtractplugin 插件的形式去加载 loader。
postcss-loader：主要做处理兼容性问题
less-loader：把 .less 文件解析为 .css 文件
css-loader：把 .css 文件解析为 css

2、抽离 css

filename 为打包后的文件名，文件存在于 dist/css 路径下，名为 main.xxx.css 。
contentHash 主要目的为了命中缓存，提高性能。

3、压缩 css

此步需借助两个插件

const TerserJSPlugin = require('terser-webpack-plugin')
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin')

到这里，css 文件已抽离、压缩结束。
通过 npm run build 命令打包后，可以看到 dist 目录下多的 css 文件（main.xxx.css xxx为哈希的值）。

压缩后的 css 文件特点：
1、所有代码变成一行；
2、没有注释了；

优点：
保证体积压缩，加载的更快。

使用场景：
通过外链的形式引用css，这样打包后的 index.xxx.js 文件就不再包含 css 内容，性能提高。

Webpack 如何抽离、压缩 CSS 文件？相关推荐

webpack抽离和压缩css文件
1.为什么要抽离和压缩css文件在生产环境,css代码必须抽离和压缩,不然打包会把css文件打包到js文件中,体积会比较大.(执行这个js再把css解析出来,塞到html中,这样性能并不好) 2.抽 ...
gulp压缩css文件夹,使用 gulp 压缩 CSS
压缩 css 代码可降低 css 文件大小,提高页面打开速度. 我们接着将规律转换为 gulp 代码 ## [](https://github.com/nimojs/gulp-book/blob/ma ...
PHP自动压缩CSS文件方法,php 压缩多个CSS文件的实现代码
/* * 压缩css文件 * by www.jbxue.com /* header('Content-type: text/css'); ob_start("compress"); ...
dw html压缩文件,如何压缩css文件？
为什么要CSS压缩?如何压缩css文件?下面本篇文章给大家介绍一下CSS代码压缩原因和压缩css文件的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. CSS代码压缩原因 CSS ...
php 使用压缩css文件,PHP-使用GZIP压缩静态CSS文件
所以我有一个CSS文件style.css.在同一目录中,我有images /文件夹. 如何制作一个从另一个文件夹压缩style.css的脚本? 现在我有这个: if(isset($_GET['css' ...
webpack3.0 压缩css 但是不在html中引用,webpack怎样压缩css？
Webpack是前端一个工具,可以让各个模块进行加载,预处理,再进行打包.现代的前端开发很多环境都依赖webpack构建,比如vue官方就推荐使用webpack. webpack可以使用css压缩插件 ...
webpack怎样压缩css？
webpack是前端一个工具,可以让各个模块进行加载,预处理,再进行打包.现代的前端开发很多环境都依赖webpack构建,比如vue官方就推荐使用webpack. webpack可以使用css压缩插件 ...
Visual Studio 编译任务压缩js和css文件
如今网站都在说优化,压缩js和css文件就成了最基本的一种方法,js和css压缩有很多方法,很多网站也提供了这样的功能,也可以用YUI提供的包手动压缩,但是这都不效率啊,能不能在vs生成部署包的时候把 ...
打开html文件图片为什么没有_提高网站打开速度秘诀:压缩html,Javascript和CSS文件...
微信公众号微信公众号微信公众号微信公众号微信公众号微信公众号微信公众号微信公众号微信公众号微信公众号微信公众号微信公众号微信公众号微信公众号微信公众号微信公众号微信公众号微信公众号微信公众号微信公众号 ...

最新文章

热门文章