`有别于webpack`：

`1.` webpack在项目启动时已经对所有的模块进行打包【因此比较慢】，vite是按需编译加载，在项目启动时不需要分析模块的依赖，不需要编      译，因此`启动非常快`，由于是按需加载，因此极大的缩减了编译时间，项目越复杂，模块越多，vite优势越明显
`2.` HMR[热更新],当文件改变时，仅需要让浏览器重新请求该模块即可，有别于webpack需要把该模块的相关模块全部编译一次
`3.`打包到生产环境时，vite使用Rollup，

`因此 vite 的 优势主要在开发阶段`

缺点：由于依赖于 ES Module，因此项目中 不可以使用 CommonJS。

`问题1：`
 每次请求的文件路径如何确定
  main.ts -> app-tab ->index.ts[引入a.component.ts]
                       a.component.ts[引入b.component.ts]
                       b.component.ts
  请求到代理服务器后index/a/b路径查找问题。如何直到是从哪个文件找。
 【vite.config.js配置 使用绝对路径 alias '/@/':path.resolve(__dirname, './src')】
 
 
 `--Vite对按需编译的处理----------------------------------------------`
 import的 文件统一以'/@/'开头，'/@/'作为根路径。👆
 因此 请求的文件就分为：'/@/'开头的源代码导入
                    '/@modules/'开头的依赖导入
                    '.ico, .png, ...' 图片
 css 和 html                    

vite 会在 DevServer启动前对需要预编译的依赖进行编译，然后在分析模块导入的时候，应用编译过的依赖。

`默认情况`会将 package.json中的  dependencies 进行预编译。然后将编译后的结果缓存在 node_modules/.vite下

`优点`：解决依赖链过长，请求多次，由于浏览器并行请求数量有限制，过多会等待，造成浏览器阻塞的问题
       依赖可能不支持 ESModule，需要编译成支持ESModule
       
       
`dependencies编译，遇到问题-----------`
  zone.js依赖的package.json 无 module 属性，只有browser指向 文件
`预解析的依赖 模块间相互引用`  core：ApplicationModule【在A】
                          platform-browser-dynamic：引用 ApplicationModule【A】
                          platform-browser：引用 ApplicationModule【A】
 但是预解析依赖 会将 ApplicationModule  在三个文件都有                        

EmitterVisitorContext.prototype.println = function (from, lastPart) {
    if (lastPart === void 0) { lastPart = ''; }
    this.print(from || null, lastPart, true);
};
`----------------------👇---------------------------`
EmitterVisitorContext.prototype.println = function (from, lastPart) {
        if (lastPart === void 0) { lastPart = ''; }
        this.print(from '/@modules/| null, lastPart, true);
};
`-----匹配函数`：
function rewriteImports(content) {
  return content.replace(/from\s*['|"]([^'"]+)['|"]/g, function ($0, $1) {
    if ($1.indexOf("/@/") !== 0) {
      console.log(`from '/@modules/${$1}'`);
      return `from '/@modules/${$1}'`;
    } else {
      return $0;
    }
  });
}

匹配函数正常情况下不会匹配到框架函数，出现这种情况的原因？？？？？？？

解析编译组件时，指令@Component将 元数据 添加到 class.metadata,但未进行转换。
Angular 在解析时，styleUrls/templateUrl 已被【compiler-cli】转换成字符串。因此会报错
------------------------------------------
Angular在编译前 有 updateDecoratorMetadata【compiler-cli】 解析

来源：platform-browser.js
报错信息：`inject() must be called from an injection context`
原因：Rollup打包时，解析impot一起打包了，导致多模块依赖同一个函数，这样就会有三个包，每个包都用同一个函数，使_currentInjector赋值未生效。。。。

`ɵcmp`，`ɵfac` 是 @Component 装饰器 给class 添加的静态属性
无模块写法，是给 component 的 def属性添加 directiveDefs和 pipeDefs。
因此顺序应该是 先执行 Component再执行 无模块赋值装饰器。

`报错信息`：ERROR Error: ASSERTION ERROR: token must be defined [Expected=> null != null <=Actual]
`定位`：【return getOrCreateInjectable((/** @type {?} */ (tNode)), lView, resolveForwardRef(token), flags);】

`例如`：constructor(@Optional() public tabs: TabbedPaneComponent) {}
 注入 TabbedPaneComponent，在解析时未收到 参数tabs[token]的值(null)，报错
 
` 原因`:在生成 指令的 ɵfac 函数时，未找到 注入的服务，为null
       指令的【ctorParameters】属性为undifined【静态参数属性未添加】
       
      `【ctorParameters】 是 Angular-cli 使用ts 特殊处理的，esbuild转换.ts文件会丢失`
       
`解决方法`：使用esbuild 弥补 Angular-cli的能力，
          Ⅰ 给class添加静态属性 ctorParameters

Ⅰ 转换 参数templateUrl，styleUrls的路径为实际内容
Ⅱ 给class添加静态属性 ctorParameters