css引入字体文件影响性能（css半透明的渐变设置方法）
程序员文章站
2023-11-17 23:20:34
在 webpack 5 中，可以通过 内置的 asset 模块，接收并加载任何文件，然后将其输出到构建目录。这样，将 asset 模块用于任何类型的文件，即其也可以处理字体文件。初始化示例工程创建一个...
在 webpack 5 中，可以通过 内置的 asset 模块，接收并加载任何文件，然后将其输出到构建目录。这样，将 asset 模块用于任何类型的文件，即其也可以处理字体文件。
初始化示例工程
创建一个字体示例工程：webpack-fonts，然后在目录webpack-fonts执行相关初始化工作：
mkdir webpack-fonts
cd webpack-fonts
npm init -y
npm install webpack webpack-cli --save-dev工程目录结构：
工程初始化目录结构
加载及配置字体资源
从系统中找到字体资源微软雅黑，共三个文件：msyh.ttc、msyhl.ttc、msyhbd.ttc，然后把这个三个字体文件放到工程的src目录下。
字体列表
编写一个样式文件style.css放入工程的src目录，在样式文件中引入字体文件，其style.css的文件内容如下：
@font-face {
font-family: 'msyh';
src: url('./msyh.ttc');
}
.webpack-font-msyh {
font-family: 'msyh';
}
@font-face {
font-family: 'msyhbd';
src: url('./msyhbd.ttc');
}
.webpack-font-msyhbd {
font-family: 'msyhbd';
}
@font-face {
font-family: 'msyhl';
src: url('./msyhl.ttc');
}在dist/index.html中添加对样式的引用：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>webpack 资源引用字体示例</title>
<script src="bundle.js"></script>
</head>
<body>
<div class="webpack-font-msyh">msyh</div>
<div class="webpack-font-msyhbd">msyhbd</div>
<div class="webpack-font-msyhl">msyhl</div>
</body>
</html>在src/index.js文件中，添加style.css的引用：
import './style.css'最后在本地安装样式loader
npm install style-loader css-loader --save-dev然后配置内置asset 对应的文件解析规则，其webpack.config.js的配置内容如下：
const path= require('path')
module.exports = {
entry: "./src/index.js",
output: {
filename: 'bundle.js',
path: path.resolve(__dirname,'dist')
},
module: {
rules: [
{
test: /.css$/i,
use: ["style-loader", "css-loader"]
},
{
test: /.(ttc|woff|woff2|eot)$/i,
type: 'asset/resource'
}
]
}
}其中package.json请参考webpack资源管理一之加载 css使用详解 中的package.json文件内容，然后执行项目构建操作，npm run build
npm run build
> webpack-fonts@1.0.0 build d:workwebpack5webpack-fonts
> webpack
asset 8509756933a61d2bb349.ttc 18.7 mib [emitted] [immutable] [from: src/msyh.ttc] [big] (auxiliary name: main)
asset 1192744f6d4a8556eef2.ttc 16 mib [emitted] [immutable] [from: src/msyhbd.ttc] [big] (auxiliary name: main)
asset 33cbc54e3a13fb6ab968.ttc 11.6 mib [emitted] [immutable] [from: src/msyhl.ttc] [big] (auxiliary name: main)
asset bundle.js 4.97 kib [emitted] [minimized] (name: main)
runtime modules 1.7 kib 5 modules
orphan modules 326 bytes [orphan] 1 module
cacheable modules 10.9 kib (javascript) 46.4 mib (asset)
javascript modules 10.8 kib
modules by path ./node_modules/ 9.04 kib
./node_modules/style-loader/dist/runtime/injectstylesintostyletag.js 6.67 kib [built] [code generated]
./node_modules/css-loader/dist/runtime/api.js 1.57 kib [built] [code generated]
./node_modules/css-loader/dist/runtime/geturl.js 830 bytes [built] [code generated]
modules by path ./src/ 1.75 kib
./src/index.js + 1 modules 346 bytes [built] [code generated]
./node_modules/css-loader/dist/cjs.js!./src/style.css 1.42 kib [built] [code generated]
asset modules 126 bytes (javascript) 46.4 mib (asset)
./src/msyh.ttc 42 bytes (javascript) 18.7 mib (asset) [built] [code generated]
./src/msyhbd.ttc 42 bytes (javascript) 16 mib (asset) [built] [code generated]
./src/msyhl.ttc 42 bytes (javascript) 11.6 mib (asset) [built] [code generated]
warning in configuration
the 'mode' option has not been set, webpack will fallback to 'production' for this value. set 'mode' option to 'development' or 'production' to enable defaults for each environment.
you can also set it to 'none' to disable any default behavior. learn more: https://webpack.js.org/configuration/mode/
warning in asset size limit: the following asset(s) exceed the recommended size limit (244 kib).
this can impact web performance.
assets:
8509756933a61d2bb349.ttc (18.7 mib)
1192744f6d4a8556eef2.ttc (16 mib)
33cbc54e3a13fb6ab968.ttc (11.6 mib)
warning in webpack performance recommendations:
you can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
for more info visit https://webpack.js.org/guides/code-splitting/
webpack 5.11.1 compiled with 3 warnings in 4414 ms然后打开dist目录，查看文件：
从目录中可以看到，按照一定的命名规则，对引用的字体进行打包命名。然后打开index.html文件，进行效果查看。
页面效果