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 插件查看当前项目打包结构来针对性优化

这是优化后的图: