优化

‘liusuyi’

2023-10-21 ae92b6823499cfab77201b4033922fa373fb37a3

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
const cssnano = require('cssnano');
const postcss = require('postcss');
 
/**
 * Optimize cssnano plugin
 *
 * @param {Object} options
 */
function OptimizeCssnanoPlugin(options) {
  this.options = Object.assign({
    sourceMap: false,
    cssnanoOptions: {
      preset: 'default',
    },
  }, options);
 
  if (this.options.sourceMap) {
    this.options.sourceMap = Object.assign(
      {inline: false},
      this.options.sourceMap || {});
  }
}
 
OptimizeCssnanoPlugin.prototype.apply = function(compiler) {
  const self = this;
 
  compiler.hooks.emit.tapAsync('OptimizeCssnanoPlugin',
    function(compilation, callback) {
      // Search for CSS assets
      const assetsNames = Object.keys(compilation.assets)
        .filter((assetName) => {
          return /\.css$/i.test(assetName);
        });
 
      let hasErrors = false;
      const promises = [];
      // Generate promises for each minification
      assetsNames.forEach((assetName) => {
        // Original CSS
        const asset = compilation.assets[assetName];
        const originalCss = asset.source();
 
        // Options for particalar cssnano call
        const postCssOptions = {
          from: assetName,
          to: assetName,
          map: false,
        };
        const cssnanoOptions = self.options.cssnanoOptions;
 
        // Extract or remove previous map
        const mapName = assetName + '.map';
        if (self.options.sourceMap) {
          // Use previous map if exist...
          if (compilation.assets[mapName]) {
            const mapObject = JSON.parse(compilation.assets[mapName].source());
 
            // ... and not empty
            if (mapObject.sources.length > 0 || mapObject.mappings.length > 0) {
              postCssOptions.map = Object.assign({
                prev: compilation.assets[mapName].source(),
              }, self.options.sourceMap);
            } else {
              postCssOptions.map = Object.assign({}, self.options.sourceMap);
            }
          }
        } else {
          delete compilation.assets[mapName];
        }
 
        // Run minification
        const promise = postcss([cssnano(cssnanoOptions)])
          .process(originalCss, postCssOptions)
          .then((result) => {
              if (hasErrors) {
                return;
              }
 
              // Extract CSS back to assets
              const processedCss = result.css;
              compilation.assets[assetName] = {
                source: function() {
                  return processedCss;
                },
                size: function() {
                  return processedCss.length;
                },
              };
 
              // Extract map back to assets
              if (result.map) {
                const processedMap = result.map.toString();
 
                compilation.assets[mapName] = {
                  source: function() {
                    return processedMap;
                  },
                  size: function() {
                    return processedMap.length;
                  },
                };
              }
            }
          ).catch(function(err) {
              hasErrors = true;
              throw new Error('CSS minification error: ' + err.message +
                '. File: ' + assetName);
            }
          );
        promises.push(promise);
      });
 
      Promise.all(promises)
        .then(function() {
          callback();
        })
        .catch(callback);
    });
};
 
module.exports = OptimizeCssnanoPlugin;