vue3 ,vite,ant design vue 极限优化打包大小,动态导入css

1,没有优化之前打包大小:

 没有压缩之前 3145KB,开启gzip压缩以后607k

2,成果:在优化完成以后,实际上那个3145KB的文件变成了242KB 整整小了12倍 (下面的default.js和dark.js实际上是样式文件,而且会异步加载)

3,总体方法:

(1) 全局引入的ant design vue 改为组件局部引入,这样带来了很多好处,包括 :

        更小的打包大小,更快的启动速度,更好的tree-shaking,更准确的类型推测

        缺点也有:

        每个文件多一行导入代码,如果大量文件修改费时间

        但是带来的效果是显著的

(2) 由于系统用到了图标选择功能,之前是全量引入了ant design icon 图标,现在改为 使用iconify 引用图标

        iconify图标就类似于iconfont,使用方法如下:

        下载安装:

yarn add @iconify/iconify
yarn add vite-plugin-purge-icons @iconify/json -D

        全局配置:

// vite.config.js
import PurgeIcons from 'vite-plugin-purge-icons'

export default {
  plugins: [
    PurgeIcons({
      /* PurgeIcons Options */
    })
  ]
}

        写一个组件

<!--
 * @Author: YangLiwei
 * @Date: 2021-09-10 15:58:09
 * @LastEditTime: 2022-07-06 15:38:29
 * @LastEditors: YangLiwei
 * @FilePath: \vite-admin\src\components\Icon.vue
 * @Description: 
-->
<template>
  <span ref="elRef" class="anticon"></span>
</template>
<script lang="ts" setup>
import Iconify from "@purge-icons/generated";
import { nextTick, ref, unref, watchEffect } from "vue";

const props = defineProps({
  name: {
    type: String,
    default: () => "",
  },
  prefix: {
    type: String,
    default: () => "ant-design",
  },
});

const elRef = ref<Element>();

const update = async () => {
  const el = unref(elRef);
  if (!el) return;

  await nextTick();
  const icon = props.prefix + ":" + props.name;
  if (!icon) return;

  const svg = Iconify.renderSVG(icon, {
    width: "1.2em",
    height: "1.2em",
  });
  if (svg) {
    el.textContent = "";
    el.appendChild(svg);
  } else {
    const span = document.createElement("span");
    span.className = "iconify";
    span.dataset.icon = icon;
    el.textContent = "";
    el.appendChild(span);
  }
};

watchEffect(() => update());
</script>

         使用:

<Menu>
                <MenuItem>
                  <Icon name="edit-outlined" class="mr-2" />
                  <a @click="changePassword">修改密码</a>
                </MenuItem>
                <MenuItem>
                  <Icon name="logout-outlined" class="mr-2" />
                  <a @click="logout">退出登录</a>
                </MenuItem>
              </Menu>

 (3),提取黑暗模式css和普通模式css

可以参考

vue3 vite ant deign vue 黑暗模式实现_yangliweigauguagua的博客-CSDN博客

切换没问题,但是打包的时候会把两个css文件一起打包进index.js,造成js文件过大

思路就是在要用到的时候动态引入css

但是在用动态引入的时候会出现页面中自动加载css的问题

解决方法就是在css后面加上?inline,vite官方文档地址:

功能 | Vite 官方中文文档

 具体代码如下:

// 切换黑暗模式或者白天模式
export const DarkMode = async (isDark: boolean) => {
  if (isDark) {
    changeTheme((await import("../less/dark.less?inline")).default);
    changeCss("--page-bg-color", "#141414");
    changeCss("--head-bg-color", "rgba(0, 0, 0, 0.5)");
    changeCss("--line-color", "#2e2e2e");
    changeCss("--content-bg-color", "rgb(255 255 255 / 4%)");
    changeCss("--text-color", "rgba(255, 255, 255, 0.85)");
  } else {
    changeTheme((await import("../less/light.less?inline")).default);
    changeCss("--page-bg-color", "white");
    changeCss("--head-bg-color", "rgba(255, 255, 255, 0.7)");
    changeCss("--line-color", "#e8e8e8");
    changeCss("--content-bg-color", "#f0f2f5");
    changeCss("--text-color", "rgba(0, 0, 0, 0.85)");
  }
};

(4),可以使用 rollup-plugin-visualizer 插件查看当前项目打包结构来针对性优化

这是优化后的图:

  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 13
    评论
Vite是一个基于ES模块的构建工具,用于快速构建现代化的Web应用程序。Vue3是一种流行的JavaScript框架,用于构建用户界面。Ant Design Vue是一个基于Vue的UI组件库,提供了丰富的可重用组件和样式。在使用ViteVue3创建项目时,可以选择使用Ant Design Vue作为UI组件库。 首先,你需要确保你的Node.js版本大于等于14.18.0,因为Vite需要这个版本以上的Node.js才能正常运行。如果你的Node.js版本较低,你需要升级到14.18.0或更高版本。 接下来,你可以使用NPM或Yarn来安装Vite并创建一个Vue3项目。使用以下命令: 使用NPM: ``` npm init vite@latest my-vue-app -- --template vue ``` 使用Yarn: ``` yarn create vite my-vue-app -- --template vue ``` 在下载过程中,你需要选择使用的语言和版本。下载完成后,你可以启动项目。在项目的`package.json`文件中,你可以找到以下脚本: ``` "scripts": { "dev": "vite", "build": "vite build", "preview": "vite preview" } ``` 使用以下命令启动项目: ``` npm run dev ``` 启动后,你将看到一个基本的Vue3模板,名为"Hello Vue3"。该模板没有引用太多的插件,你可以根据需要自行安装。 对于Ant Design Vue的配置,你需要先安装它的插件。使用以下命令安装: ``` npm i --save ant-design-vue ``` 在`main.js`文件中引入Ant Design Vue: ```javascript import { createApp } from 'vue' import App from './App.vue' import Antd from 'ant-design-vue'; import 'ant-design-vue/dist/antd.css'; createApp(App).use(Antd).mount('#app') ``` 如果你还需要使用路由插件,可以使用以下命令安装Vue Router 4: ``` npm install vue-router@4 ``` 这样,你就完成了ViteVue3项目的配置。记得切换到项目目录并安装相关依赖,然后运行项目: ``` cd my-vue-app npm install npm run dev ``` 这样,你就可以开始使用ViteVue3和Ant Design Vue来开发你的项目了。
评论 13
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值