css引入字体文件影响性能（css半透明的渐变设置方法）

2024年11月4日 09:53:05 • 投稿 • 阅读 19

在 webpack 5 中，可以通过内置的 Asset 模块，接收并加载任何文件，然后将其输出到构建目录。这样，将 Asset 模块用于任何类型的文件，即其也可以处理字体文件。

初始化示例工程

创建一个字体示例工程：webpack-fonts，然后在目录webpack-fonts执行相关初始化工作：

mkdir webpack-fontscd webpack-fontsnpm init -ynpm install webpack webpack-cli --save-dev

工程目录结构： webpack5资源管理三之加载字体文件使用详解

工程初始化目录结构

加载及配置字体资源

从系统中找到字体资源微软雅黑，共三个文件：msyh.ttc、msyhl.ttc、msyhbd.ttc，然后把这个三个字体文件放到工程的src目录下。 webpack5资源管理三之加载字体文件使用详解

字体列表

编写一个样式文件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> webpackasset 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 modulesorphan modules 326 bytes [orphan] 1 modulecacheable 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 configurationThe '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目录，查看文件：

css引入字体文件影响性能（css半透明的渐变设置方法）