在前端开发中，优化打包是一项重要的技术，而 CSS 打包的优化也是其中的一项。在工程项目中，添加一些无用的 CSS 样式，将使网页加重并增加实际加载时间。为了解决这个问题，我们可以使用 CSS Tree Shaking 技术来实现优化。
在本文中，我将介绍 npm 包 webpack-css-treeshaking-plugin，这是一个可以通过删除无用 CSS 样式来进行 CSS 优化的 webpack 插件。该插件可以帮助我们自动地剪裁 CSS 中未使用的样式，从而大幅度减少 CSS 文件的大小。
安装
首先我们需要安装webpack和webpack-css-treeshaking-plugin插件：
npm install webpack webpack-cli webpack-css-treeshaking-plugin --save-dev
使用方法
在 webpack 的配置文件中，我们需要引入 webpack-css-treeshaking-plugin 插件和 mini-css-extract-plugin 插件。在 optimization.optimizationCss 配置中，我们将使用此插件来实现优化：
// 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 { CssTreeshakingPlugin } = require('webpack-css-treeshaking-plugin')
module.exports = {
mode: 'production',
entry: './src/index.js',
output: {
filename: '[name].[chunkhash].js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, 'css-loader']
}
]
},
plugins: [
new MiniCssExtractPlugin({
filename: 'style.[contenthash:8].css'
}),
new CssTreeshakingPlugin({
strict: true,
verbose: true
}),
new OptimizeCssAssetsPlugin()
],
optimization: {
moduleIds: 'hashed',
runtimeChunk: 'single',
splitChunks: {
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
name: 'vendors',
chunks: 'all'
},
styles: {
test: /\.css$/,
name: 'styles',
chunks: 'all',
enforce: true
}
}
},
minimize: true,
minimizer: [
new OptimizeCssAssetsPlugin()
]
}
}参数配置
- strict: 是否默认开启严格模式，默认为关闭模式。
- verbose: 是否输出所有不必要的信息，默认为输出不必要信息，所以需要设置为 false。
示例代码
// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello webpack</title>
<link rel="stylesheet" href="./dist/style.3a3b1cef.css">
</head>
<body>
<div class="wrapper">
<h1>Hello webpack!</h1>
<p>I'm a paragraph.</p>
</div>
</body>
</html>import './style.css'
console.log('Hello webpack running!')结论
在本文中，我们使用了 webpack-css-treeshaking-plugin 插件实现了优化 CSS 打包。通过将无用 CSS 样式剪裁，我们可以大幅度减少 CSS 文件的大小，从而提高网页的加载速度。通过此插件的使用，我们可以优化项目的 CSS 打包效率，也可以发挥出 webpack 的优秀功能。希望这篇文章能够给大家带来帮助。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/600560d881e8991b448df1a8