# 提取单独的CSS文件以优化性能
由于 webpack 默认只会处理JS文件和生成JS文件
所有 css 文件默认被打包到 js 文件中,当 js 文件加载时,会创建一个 style 标签来生成样式
这样对于网站来说,会出现闪屏现象,用户体验不好
我们应该是单独的 Css 文件,通过 link 标签加载性能才好
同时也涉及到了三个操作
- 提取 CSS 文件 (
mini-css-extract-plugin
) - 对 CSS 文件 进行兼容处理(
postcss-loader postcss postcss-preset-env
) - 压缩 CSS 文件 (
css-minimizer-webpack-plugin
)
# 提取 CSS 文件 (mini-css-extract-plugin
)
# 安装
npm i mini-css-extract-plugin -D
1
mini-css-extract-plugin ,它是一个webpack插件,用于将CSS文件从JavaScript文件中提取出来,生成独立的CSS文件。
# 配置webpack.config.js
// webpack.config.js
//... 其他配置
const MiniCssExtractPlugin = require("mini-css-extract-plugin"); // 引入单独提取
module.exports = {
entry: "./src/main.js",
output: {
//... 其他配置
},
module: {
rules: [
{
// 用来匹配 .css 结尾的文件
test: /\.css$/,
// use 数组里面 Loader 执行顺序是从右到左
use: [MiniCssExtractPlugin.loader, "css-loader"], // css文件单独提取loader配置
},
{
test: /\.less$/,
use: [MiniCssExtractPlugin.loader, "css-loader", "less-loader"], // css文件单独提取loader配置
},
{
test: /\.s[ac]ss$/,
use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"], // css文件单独提取loader配置
},
//... 其他配置
],
},
plugins: [
//... 其他配置
// 提取css成单独文件
new MiniCssExtractPlugin({
// 定义输出文件名和目录
filename: "static/css/main.css",
}),
],
mode: "production",
};
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
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
# 对 CSS 文件 进行兼容处理(postcss-loader postcss postcss-preset-env
)
# 安装
npm i postcss-loader postcss postcss-preset-env -D
1
postcss-loader:
这是一个webpack loader,用于在webpack构建过程中处理CSS文件,特别是使用PostCSS进行处理。
postcss:
PostCSS是一个用JavaScript工具和插件生态系统来转换CSS代码的工具。它允许你使用最新的CSS语法,并且可以通过插件来扩展其功能。
postcss-preset-env:
这是一个PostCSS的插件,提供了未来CSS规范中的特性,使得你可以在现代浏览器中使用它们,同时保持向后兼容性。
# 配置CSS兼容的层级
我们可以在!!! package.json
!!!文件中添加 browserslist
来控制样式的兼容性做到什么程度。
{
// 其他省略
"browserslist": ["ie >= 8"]
}
1
2
3
4
2
3
4
想要知道更多的 browserslist
配置,查看browserslist 文档open in new window (opens new window)
以上为了测试兼容性所以设置兼容浏览器 ie8 以上。
实际开发中我们一般不考虑旧版本浏览器了,所以我们可以这样设置:
{
// 其他省略
"browserslist": ["last 2 version", "> 1%", "not dead"]
}
1
2
3
4
2
3
4
# 配置webpack.config.js
# 合并配置样式的Loaders
/**
* @description 获取处理css样式的loaders工具配置函数, 配置了基础的loader,同时接收传参自定义loader
* @param {Array} preProcessorList []
* @returns
*/
const setStyleLoaders = (preProcessorList = []) => {
return [
// 单独提取css文件loader
MiniCssExtractPlugin.loader,
// 基础css-loader
"css-loader",
// css代码兼容处理loader配置
{
loader: "postcss-loader",
options: {
postcssOptions: {
plugins: [
"postcss-preset-env", // 能解决大多数样式兼容性问题
],
},
},
},
// 外部传入自定义 loader
...preProcessorList,
].filter(Boolean); // 筛选所有存在的loader
};
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
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
# webpack.config.js
module.exports = {
entry: "./src/main.js",
output: {
//... 其他配置
},
module: {
rules: [
{
// 用来匹配 .css 结尾的文件
test: /\.css$/,
// use 数组里面 Loader 执行顺序是从右到左
use: getStyleLoaders(),
},
{
test: /\.less$/,
use: getStyleLoaders("less-loader"),
},
{
test: /\.s[ac]ss$/,
use: getStyleLoaders("sass-loader"),
},
//... 其他配置
],
},
plugins: [
//... 其他配置
],
mode: "production",
};
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
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
# 压缩 CSS 文件 (css-minimizer-webpack-plugin
)
# 安装
npm i css-minimizer-webpack-plugin -D
1
"css-minimizer-webpack-plugin" 是一个用于 Webpack 的插件,它的作用是在 Webpack 构建过程中对 CSS 进行压缩和优化
# 配置 webpack.config.js
//... 其他配置
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
module.exports = {
entry: "./src/main.js",
output: {
//... 其他配置
},
module: {
rules: [
//... 其他配置
],
},
plugins: [
//... 其他配置
// css压缩
new CssMinimizerPlugin(),
],
mode: "production",
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21