这样拆分和压缩css代码

2024-05-10 23:34:31

在【拆分】和【压缩】css代码之前，首先要配置 loader 处理不同的 css 资源，因为 webpack 没有默认可处理 css 资源的规则，具体可参考这一篇 webpack处理css/less资源

style-loader

loader 处理不同类型的 css 资源后通过 style-loader将css代码添加到 html文件中，但此时 css 代码并没有生成单独的文件，而是被编译到了 js 文件中。

所以在 html 页面中，css 代码是通过 style标签创建的，而不是直接引入 css 资源地址。

MiniCssExtractPlugin

当 css 文件较多时，全部打包至 js 文件，会使得 js 文件体积很大，将 css 代码抽离到单独的文件中能减少单个文件的加载压力。可通过 MiniCssExtractPlugin 实现。

安装 mini-css-extract-plugin, 定义 plugin，并用 MiniCssExtractPlugin.loader替换 style-loader

const MiniCssExtractPlugin = require('mini-css-extract-plugin');module.exports = {// 省略其余配置  module: {rules: [{test: /\.css$/,use: [MiniCssExtractPlugin.loader, 'css-loader'], // 省略其它loader},],},plugins: [new MiniCssExtractPlugin({filename: './css/[name].css',chunkFilename: './css/[name].css',}),],
};

编译后的 css 将两个 css 文件代码合到了一起

css 资源被引入到 html 页面中

CssMinimizerWebpackPlugin

MiniCssExtractPlugin只对 css 代码进行了拆分，压缩需要使用到 CssMinimizerWebpackPlugin。

安装 css-minimizer-webpack-plugin后，在 optimization属性中配置。

const CssMinimizerWebpackPlugin = require('css-minimizer-webpack-plugin');module.exports = {// 其它配置省略optimization: {minimizer: [new CssMinimizerWebpackPlugin({})],},
};

可以看到压缩后css代码和源代码区别不大，这是因为如果修改选择器和属性名称，很难再与原来的元素对应，会需要增加复杂的处理映射关系的逻辑处理，所以对 css 的压缩主要是去除空格的操作。

总结

style-loader 用于创建 style 标签，将 css 代码添加到 html 页面中
MiniCssExtractPlugin 会将处理好的 css 代码编译到新的 css 文件中，并在 html 文件中引入
CssMinimizerWebpackPlugin 压缩 css 文件中的代码

以上就是拆分和压缩css代码的介绍，更多有关 webpack的内容可以参考我其它的博文，持续更新中~

这样拆分和压缩css代码相关推荐

16-webpack 压缩 CSS 代码
从 06-webpack 加载 CSS 之后,能够正常加载 CSS ,并且能够正常显示. 要看到压缩 CSS 代码效果,需要先把 CSS 从 bundle.js 中抽离出来,并导入独立的文件中去,然后 ...
解决 webpack4 中无法压缩 CSS 代码的问题
在webpack4中,我们可以使用 optimize-css-assets-webpack-plugin 插件来压缩 CSS 代码(具体内容可结合该插件的官网:https://www.npmjs.co ...
webpack抽离css，压缩css代码和 js代码
前言在实际生产环境中,较少使用style-loader,css代码被打包到了 main.js里面,这时候就需要对css代码进行抽离优化. module.exports = {module:{rule ...
如何压缩css代码,在开发中怎么压缩js和css?有哪些办法？
在开发的时候我们会选择将自己的代码进行压缩和打包,那么对于"在开发中怎么压缩js和css?有哪些办法?"这个问题小编为带来了一些干货. 对于压缩 js 与 css,我们一般是使用在 ...
gulp压缩css文件夹,使用 gulp 压缩 CSS
压缩 css 代码可降低 css 文件大小,提高页面打开速度. 我们接着将规律转换为 gulp 代码 ## [](https://github.com/nimojs/gulp-book/blob/ma ...
css 设置表格右边有图片_20个web前端HTML5初学者实用CSS代码技巧
在本文中,我们想与您分享一个由各大CSS网站总结推荐的20个有用的规则和实践经验集合.有一些是面向CSS初学者的,有一些知识点是进阶型的.希望每个人通过这篇文章都能学到对自己有用的知识. 1.注意外边 ...
20 个让你效率更高的 CSS 代码技巧
(给IT平头哥联盟加星标,提升前端技能) 作者:过冬 https://segmentfault.com/a/1190000019542534 在这里想与你分享一个由各大CSS网站总结推荐的20个有用的 ...
dw html压缩文件,如何压缩css文件？
为什么要CSS压缩?如何压缩css文件?下面本篇文章给大家介绍一下CSS代码压缩原因和压缩css文件的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. CSS代码压缩原因 CSS ...
在线CSS代码压缩美化工具
在线CSS代码压缩美化工具在线CSS代码压缩美化工具在线CSS代码压缩.格式化工具.可以删除注释在线CSS代码压缩.格式化工具.可以删除注释 https://tooltt.com/css/
css样式压缩了怎么还原,CSS代码的压缩方法
原标题:CSS代码的压缩方法在建站的时候,很多网站都对他们的代码进行压缩,今天主要来讲解下CSS代码的压缩,压缩后的CSS代码所占用字节数会减少,要是访问量比较小的网站看不出明显的区别,比较大型的网 ...

最新文章

热门文章