Vite 面试问题

rollup 篇

1 .rollup优势？打包阶段实现tree shaking,webpack 作为构建工具，用在lib开发方面，打包出来的代码包含大量冗余代码
2 .Tree-shaking 的目的,去除无用的代码，缩小包的最小体积

1 .代码不会被执行，不可到达
2 .代码执行的结果不会被用到
3 .代码只会影响死变量，只读不写，tree-shaking的目的就是将三类代码在最终包中提出，做到按需引入

3 .之前以为是只会根据import这个来处理，结果是很复杂，还有别的情况也需要考虑到
4 .依赖于es6 module

1 .只能作为模块顶层的语句出现，必须在最上面定义
2 .import 的模块名只能是字符串常量
3 .import 之后是不可修改的，比如在使用commonJs时，必须导入完整的工具tool或库对象，且可带有条件判断来决定是否导入

rollup tree-shaking 机制

1 .支持导出es模块的包
2 .支持程序流分析，能更加正确的判断项目本身的代码是否有副作用
3 .在将 module graph 分离为 chunks 时，如果一个 module 被 importor module 依赖，但是它的 exports 并没有被使用，那么该 module 不会添加到 chunk 中，实现了 module level 的 tree shaking；
4 .一个 module 的 exports，如果没有被其他 module 使用到，那么在构建 chunk 内容时就会被移除掉，实现了 statement level 的 tree shaking；
5 .也就是说必须要export 和 import两个都对的上，才会打进包里面

Vue3 针对Tree-shaking所做的优化

import Vue from 'vue'

Vue.nextTick(() => {
  // 一些和 DOM 有关的东西
})

1 .在 vue2 中，上面的全局api，Vue.nextTick()是不支持Tree-shaking的，因为他没有被单独export，无论这个方法是否被调用，都会被包含在最终的打包产物中。
2 .在Vue3 中，针对全局和内部Api进行了改造。有了这个能力，就可以不用过于关注框架总体的体积了，按需打包使我们只需要关注哪些我们已经使用到的代码和功能

rollup 打包一个问题

1 .如何拆分包体。图片，库文件，这些不会变的东西，打一个文件夹
2 .每次变化的业务代码。打一个文件。
3 .其实他自己每次没有变化的文件，前后哈希值是一样的。但是我们这边传cdn的时候，没有替换操作，或者说替换操作很繁琐，也不会删除一些东西。都是直接一个新命名，然后丢上去
4 .有分离chunk规则 https://juejin.cn/post/7125753214489591821#heading-19

vite 的常用命令有哪些

1 .vite dev,vite serve ,vite optimize:手动进行预加载依赖优化
2 .vite build
3 .vite preview