乐趣区

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

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

style-loader

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

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

MiniCssExtractPlugin

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

CssMinimizerWebpackPlugin

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

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

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

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

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

总结

  • style-loader 用于创立 style 标签,将 css 代码增加到 html 页面中
  • MiniCssExtractPlugin 会将解决好的 css 代码编译到新的 css 文件中,并在 html 文件中引入
  • CssMinimizerWebpackPlugin 压缩 css 文件中的代码

以上就是拆分和压缩 css 代码的介绍,更多无关 webpack 的内容能够参考我其它的博文,继续更新中~

退出移动版