vite打包如何排除不需要的模块？

Question

vite 版本：5.2.8
vue版本：3.4.21

项目结构

• common 公共模块
• system 系统目录（业务）

在system中依赖了common模块，使用yarn link 方式导入
common中有个tinymce(封装后名称为:BhdRichText)的组件，但在system中没有使用
打包时发现tinymce也被打包了，还有其他组件没有在system中使用的也打包了，导致build的结果非常大。

• 如果BhdRichText注释掉，就不会被打包。这不符合vite打包的规则。
  

补充

写了一个demo测试，它却是正常的。

demo

common/index.js

export {default as xg} from './xg.vue'
export {default as hyj} from './hyj.vue'
export * from './utils.js'

common/xg.vue (使用到了xgplayer依赖)

<!-- xgplayer -->
<template>
  <div>西瓜视频</div>
</template>
<script setup>
import Player from 'xgplayer';
import 'xgplayer/dist/index.min.css';

function createPlayer() {
  player.value = new Player({
      el: playerRef.value,
      width: '100%',
      lang: 'zh-cn',
      autoplay: props.aotoPlay,
      height: '100%',
  });
  if (HlsPlugin.isSupported()) {
      player.value.registerPlugin(HlsPlugin);
  }
  player.value.on(Events.LOADED_DATA, onLoaded);
  player.value.on(Events.ERROR, onError);
}
createPlayer();
</script>

common/hyj.vue

<!-- 没有使用其他依赖 -->
<template>
  <div>苹果苹果</div>
</template>
<script setup>
import {bbb} from './utils.js'
bbb();
</script>

common/utils.js

export function aaaa (){
  console.log('aaaa') 
}

export function bbb() {
  console.log('bbb')
}

export function ccc() {
  console.log('ccc')
}

system/App.vue

...
<script setup>
import HelloWorld from './components/HelloWorld.vue'
import TheWelcome from './components/TheWelcome.vue'
import {aaaa, hyj} from "@hdi-bhd/xxxxx"
aaaa();
</script>
...

build 结果

• hyj.vue组件被打包了
• utils.js中也只有用到的aaaa和bbb被打包
• xg.vue没有被打包
  这正是我想要的结果，用到什么就打包什么。
  这个demo和我的项目版本一模一样。
  
• 请问如何让tinymce不要被打包
• 请问如何排查是哪里的问题？

Answer 1

用 build.rollupOptions.external：

// vite.config.js
import { defineConfig } from 'vite';

export default defineConfig({
  build: {
    rollupOptions: {
      external: ['tinymce'] // 排除 tinymce 模块
    }
  }
});

Answer 2

一般来说就是“依赖的依赖”，你从用到它的组件开始一层一层往上找，总能找得到。

还有一种可能就是该用模块加载的时候用了全部加载。拿 lodash 举例就是：该用 import isString from 'lodash/isString' 的地方，用了 import { isString } from 'lodash'。

解决方案一般是路由懒加载和依赖懒加载。比如，你在用到它的组件里将引用改成 import() 多半可以解决问题。同时确保没有整个模块全部加载。