vue3 webpack配置打包优化

最新推荐文章于 2024-07-05 11:36:09 发布

不朽680

最新推荐文章于 2024-07-05 11:36:09 发布

阅读量479

点赞数

文章标签： webpack javascript 前端

本文链接：https://blog.csdn.net/weixin_59556897/article/details/129501378

版权

文章介绍了如何利用font-spider插件对字体文件进行优化，通过在HTML中添加@font-face规则并运行font-spider命令来转换字体。此外，还提到了在Vue项目中，可以通过在vue.config.js中设置productionSourceMap为false来避免生成多余的map文件，以减小生产环境的文件大小。

摘要由CSDN通过智能技术生成

1.字体文件打包优化

新建一个文件夹。

打开cmd输入

这里使用的是font-spider插件

npm install font-spider -g

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>Document</title>
    <!--link rel="stylesheet" href="./index.css"-->
    <style>
      @font-face {
        font-family: "myFont";
        src: url("./HarmonyOS_Sans_SC_Black.af373373.ttf") format("truetype");
        font-weight: normal;
        font-style: normal;
      }

      .myFont {
        font-family: "myFont";
      }
    </style>
  </head>

  <body>
    <!-- 这里对应的是Bold的压缩包 -->
    <h1 class="myFont">
      基本信息
    </h1>
  </body>
</html>

将需要转换的文字输入到里面去

之后再cmd输入

font-spider index.html

会转换成功，在文件夹里面。

2.dist目录js文件夹里面有很多map文件

在vue.config.js文件加入这句话即可

 productionSourceMap: false,

不朽680

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue3 webpack配置打包优化

2.dist目录js文件夹里面有很多map文件。在vue.config.js文件加入这句话即可。这里使用的是font-spider插件。将需要转换的文字输入到里面去。会转换成功，在文件夹里面。1.字体文件打包优化。
复制链接

扫一扫