关于前端:这样拆分和压缩css代码

5次阅读

共计 1343 个字符，预计需要花费 4 分钟才能阅读完成。

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

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

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

当 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 页面中

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

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

const CssMinimizerWebpackPlugin = require('css-minimizer-webpack-plugin');

module.exports = {
  // 其它配置省略
  optimization: {minimizer: [new CssMinimizerWebpackPlugin({})],
  },
};

能够看到压缩后 css 代码和源代码区别不大，这是因为如果批改选择器和属性名称，很难再与原来的元素对应，会须要减少简单的解决映射关系的逻辑解决，所以对 css 的压缩次要是去除空格的操作。