webpack插件optimize-css-assets-webpack-plugin

html-css019

webpack插件optimize-css-assets-webpack-plugin,第1张

该插件主要用来压缩css文件

使用:

1.安装

2.webpack.config.js配置

参数:

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

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

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

cssProcessorPluginOptions :传递给cssProcessor的插件选项,默认为 {}

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

如果您下载的是一个插件的压缩包的话,把里面的文件放到Css安装目录下 Plug-ins\Panels 文件夹中即可

E:\Adobe\Adobe Photoshop CC (64 Bit)\Plug-ins\Panels

如果你下载的是zxp格式的文件的话,那么就需要使用Adobe Extension Manager来安装(没有的话去网上找个和你的ps版本相同的Adobe Extension Manager)

打开Adobe Extension Manager,然后执行 文件——安装扩展

然后找到您的zxp格式文件 打开即可安装

安装完之后 在Adobe Extension Manager里面会有显示的,这样就证明已经安装成功了,此时可以把Adobe Extension Manager关掉了

然后打开ps,打开 窗口——扩展功能——CSS3Ps 就能在您的ps上使用这个插件了。

1、chrome浏览器 F12审查元素的Audits

说明:使用Audits,会检测出页面中没有用到的css,需要手动删除多余的css;同时需要说明的是检测出多余无用的css块,而不是某一行css。

2、CSS usage插件

(1)安装Firefox浏览器

(2)安装firebug

Firefox浏览器--添加附件--搜索插件--安装

(3)安装css usage

步骤同安装firebug一样。

(4)检测

重要说明:可以导出干净的css