webpack 优化之 CSS 篇

随着前端开发的发展，越来越多的样式文件被引入到项目中，这样就增加了网站加载的时间。Webpack 作为前端开发的利器，可以通过对 CSS 进行一系列优化来提高性能。

1. 消除未使用的 CSS

在我们的项目中，通常会存在一些无用的 CSS 代码，因为我们的样式文件可能会包含多个组件的样式。这些未使用的 CSS 代码不仅浪费资源，也会减慢网站加载速度。

Webpack 中可以使用 purgecss-webpack-plugin 插件的 Purgecss 工具来自动扫描未使用的 CSS 代码。使用该工具可以有效减小样式文件大小，提高网站加载速度。以下是应用该工具的示例代码：

// www.javascriptcn.com code example
const path = require('path');
const glob = require('glob');
const PurgecssPlugin = require('purgecss-webpack-plugin');

module.exports = {
  mode: 'production',
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
  },
  plugins: [
    new PurgecssWebpackPlugin({
      paths: glob.sync(`${path.join(__dirname, 'src')}/**/*.{js,html,vue}`),
    }),
  ],
};

2. 压缩 CSS

我们可以使用 cssnano 插件来对 CSS 进行压缩，减小文件大小。使用该插件不影响样式的展现，同时也能实现更快的网页加载速度。以下是使用 cssnano 插件的示例代码：

// www.javascriptcn.com code example
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const CssnanoPlugin = require('cssnano-webpack-plugin');

module.exports = {
  mode: 'production',
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              publicPath: '/',
            },
          },
          'css-loader',
        ],
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].[contenthash].css',
    }),
    new OptimizeCssAssetsPlugin(),
    new CssnanoPlugin(),
  ],
};

3. 按需加载 CSS

我们可以使用 webpack 的 mini-css-extract-plugin 插件将 CSS 文件单独打包成一个文件，减少主 JavaScript 文件大小，同时也能更加方便地进行缓存和更新。以下是使用该插件的示例代码:

// www.javascriptcn.com code example
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  mode: 'production',
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              publicPath: '/',
            },
          },
          'css-loader',
        ],
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].css',
      chunkFilename: '[id].css',
    }),
  ],
};

结语

通过上述优化，我们可以减小样式文件大小，提高网站加载速度，提升用户体验。Webpack 提供了丰富的插件和工具，可以更加高效地进行前端开发。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67cfff24e46428fe9ec6b5ee