vite优化包体积实践记录

打包项目的时候发现单文件超过了500kb，所以我们来着手优化一下~

---

首先看一下构建产物，是哪一个包这么大

上图打包出来的highlight有969kb，index文件也有860kb，我们一个个来处理

---

首先index中是因为全局引入了element-plus，所以我们改成按需引入element-plus

把入口文件的全局引入删除掉

接着按照官方给的操作步骤引入即可

---

按上述配置完之后，我们是按需导入了，但实际上element-plus包和页面文件chat揉在了一起（index文件小了，但是页面文件chat大了），如下图：

vue-router支持路由懒加载，不了解的同学可以去看一看

所以我们在vite中将element-plus打成一个chunk

// vite.config.js
    export default {
      build: {
        rollupOptions: {
          output: {
            manualChunks: {
              "element-plus": ["element-plus"]
            },
          },
        },
      },
    };

这样就OK了，可以看到chat变小，element-plus单独成为一个chunk

---

接下来，我们来解决highlight的问题

官方提供了三种引入方式

github.com/highlightjs…

我选择第二种，因为这个common包中默认注册了常用的语言，我看了看符合我的需求，下面是源码：

如果有些没注册，可以后续再按照第三种方式自定义注册即可：

import hljs from 'highlight.js/lib/core';
import javascript from 'highlight.js/lib/languages/javascript';
hljs.registerLanguage('javascript', javascript);

最后，让我们看一看打包结果：

highlight包只有162kb了，大功告成🎉