05月09, 2018

问题分析-Webpack配置-optimize-css-assets-webpack-plugin

问题现象

发现线上有动画显示不对,查看代码后发现动画名称被修改。

问题分析

查看Webpack配置发现生产环境的配置项使用了optimize-css-assets-webpack-plugin这个插件导致。

查看文档发现该插件的主要作用是压缩和优化css代码,默认的处理器为 cssnao, 考虑应该是某个参数传入问题导致动画名称被修改。

配置中的css-loader 也使用cssnano处理器,并没有该副作用。查看css-loader代码,发现其配置项有如下代码:

if(minimize) {
        var cssnano = require("cssnano");
        var minimizeOptions = assign({}, query.minimize);
        ["zindex", "normalizeUrl", "discardUnused", "mergeIdents", "reduceIdents", "autoprefixer"].forEach(function(name) {
            if(typeof minimizeOptions[name] === "undefined")
                minimizeOptions[name] = false;
        });
        pipeline.use(cssnano(minimizeOptions));
    }

可以看到它将一些属性都设置为false了。

再查看 optimize-css-assets-webpack-plugin的代码:

 this.options.cssProcessor = !options || !options.cssProcessor ?
        require('cssnano') :
        options.cssProcessor;
    this.options.cssProcessorOptions = !options || options.cssProcessorOptions === undefined ?
      {} :
      options.cssProcessorOptions;

并没有做特殊处理。

针对这几个属性进行查找可发现`reduceIdents属性会替换动画名称,cssnano官方也说明了这是高级特性,使用需慎重,且默认不提供该功能。

但从代码中看,css-loader主动去掉了这些特性。

结论

在配置中将高级属性关闭。

// 有些processor有副作用,慎用,必要时可关闭,http://cssnano.co/guides/advanced-transforms/
const disableList = ["zindex", "normalizeUrl", "discardUnused", "mergeIdents", "reduceIdents", "autoprefixer"];
let disableOption = {};
disableList.forEach(item => {
  disableOption[item] = false;
});

Refs

  1. http://cssnano.co/guides/advanced-transforms/

本文链接:http://fengbaiyang.cn/post/webpack-css-assets-plugin.html

-- EOF --

Comments

暂不支持评论,如有问题,请发邮件至baiyang.feng@outlook.com。 望不吝赐教~