webpack怎样压缩css?

更新日期: 2020-02-26阅读: 2.4k标签: 压缩

webpack前端一个工具,可以让各个模块进行加载,预处理,再进行打包。现代的前端开发很多环境都依赖webpack构建,比如vue官方就推荐使用webpack。

webpack可以使用css压缩插件Optimize CSS Assets Webpack Plugin来压缩css文件。


该插件有什么作用?

它将在Webpack构建期间搜索CSS资源,并将优化\最小化CSS(默认情况下,它使用cssnano,但可以指定自定义CSS处理器)。

解决了extract-text-webpack-plugin CSS重复问题。

由于extract-text-webpack-plugin仅捆绑(合并)文本块,如果它用于捆绑CSS,则捆绑包可能具有重复的条目(块可以是重复的,但是当合并时,可以创建重复的CSS)。

安装:

npm install --save-dev optimize-css-assets-webpack-plugin

参数:

该插件可以接收以下选项(所有这些都是可选的):

assetNameRegExp:一个正则表达式,指示应优化\最小化的资产的名称。提供的正则表达式针对配置中ExtractTextPlugin实例导出的文件的文件名运行,而不是源CSS文件的文件名。默认为/\.css$/g

cssProcessor:用于优化\最小化CSS的CSS处理器,默认为cssnano。这应该是一个跟随cssnano.process接口的函数(接收CSS和选项参数并返回一个Promise)。

cssProcessorOptions:传递给cssProcessor的选项,默认为{}

canPrint:一个布尔值,指示插件是否可以将消息打印到控制台,默认为true

实例:

var OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract('style-loader', 'css-loader')
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin('styles.css'),
    new OptimizeCssAssetsPlugin({
      assetNameRegExp: /\.optimize\.css$/g,
      cssProcessor: require('cssnano'),
      cssProcessorOptions: { safe: true, discardComments: { removeAll: true } },
      canPrint: true
    })
  ]
};

链接: https://fly63.com/article/detial/9187

JS/TS语言zip压缩解压缩三方库及其使用

TS语言的Laya项目里,要用typescript对压缩过的文件解压缩。文件是AS3写的工具导出的。下载找到的zlib.js或zlib.min.js文件,自己编写zlib.min.d.ts文件,代码如下:

Apache开启GZIP压缩功能方法

Gzip是一种流行的文件压缩算法,现在的应用十分广泛,尤其是在Linux平台,Gzip在现代浏览器中默认都是支持的,当一个纯文本文件使用Gzip压缩可以减少70%以上的文件大小,本文讲解了如何开启Apache平台上的Gzip压缩功能

webpack 代码压缩

正常情况下,如果我们配置生成环境,webpack会自动帮js压缩,必须配置--mode=production,但是如果我们要把css也压缩的话,问题就来了,css压缩

PHP 实现压缩解压操作

在php中,有时我们需要使用到压缩文件操作,压缩文件可以节省磁盘空间;且压缩文件更小,便于网络传输,效率高,下面我们就来了解php的压缩解压相关操作

HBase 有几种压缩方式?

在使用 HBase 的时候,为了节省数据的空间占用,通常我们会为 HBase 设置压缩属性。与其他的表级别属性一样,压缩设置也是针对具体列族进行设置的。HBase 创建表时默认压缩为 NONE ,即没有压缩,除非指定

使用Canvas压缩图片

讲干货,不啰嗦,当涉及对图片有质量压缩要求的时候,可以使用Canvas实现图片压缩。步骤:1.获取img元素,既要压缩的图片2.创建canvas对象3.使用canvas的drawImage方法绘制图片

图片自动压缩

团队开启了一个新项目,希望能在原来项目的工程化基础上再进一步,于是想到了图片自动压缩。这里的图片自动压缩并不是在webpack构建阶段压缩,而是在git commit的时候进行。

js 压缩图片(只缩小体积,不更改图片尺寸)

我们知道现在,手机拍照在10MB左右,体积太大,在上传到服务器前,能不能只缩小图片的体积,而不改变图片尺寸? 这里我们可以通过canvas实现对图片的重新绘制,已便达到图片压缩的效果。

利用 canvas 实现图片压缩

项目中做身份证识别时,需要传送图片的 base64 格式编码,但是手机拍摄的照片都太大了,转成 base64 简直可怕,因此找了一下解决办法,input 标签的 onchange 事件是在上传完文件之后触发。

Nginx优化:网页压缩与缓存时间

Nginx的ngx http .gzip_ module压缩模块提供对文件内容压缩的功能,允许Nginx服务器将输出内容在发送客户端之前进行压缩,以节约网站带宽,提升用户的访问体验,默认已经安装

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!