Vite如何全量导入

Question

有一个场景，经过vite打包出来的主文件比如 index.js，里面都是用 esm 去 import 其他资源文件，但是我不想这样。对于特定的页面（多页），我想让部分页面使用es5全量打包到index.js里，而不是使用esm引入。请问该怎么做

Answer 1

Sunday 2022-05-13 10:48:07

你好

这应该是一个比较奇怪的需求，因为我们通常情况下，都是希望尽可能的进行代码分割，而不是代码合并。

如果你确实希望这么做的话，那么或许可以在 router/index.js 中，不再使用组件的按需导入，而是：

1、 在js 文件头部，通过 import 导入所有的组件

2、在routes 路由表中，删除 ()=>import(...) 改用直接导入的组件。

以此方法，会讲所有的组件全部一次性加载，不知道这个是不是你期望的。

• 提问者 Rinimas #1

  具体的情况，是在一个沙盒内，只允许加载index.js这一个文件，且不允许在其内通过import加载其他资源。我使用 import {xxx} from antd 的方式，最后打包后其组件就是import这样的语法出现在 index.js。不知道老师明白我的场景了没有，确实奇怪，但是沙盒限制了

• Sunday 回复 提问者 Rinimas #2

  你或许可以看下这个文档：https://cn.vitejs.dev/guide/build.html#chunking-strategy 里面描述了产物分块策略，因为 vite 底层依赖了 rullup ，所以我们需要看的其实就是  rullup 如何打包到一个 js 中，所以你可能需要同时查看 rollup 的文档和 vite 的文档。 
  另外你可能还需要注意 cdn 是否可以在你的沙盒中使用。