cacheloader
问题：随着业务代码不断增加，项目深度不断延伸，我们的构建时长也会因此不断增加。渐渐的vue项目编译时间变长
##优化方法
一些性能开销较大的 loader 前面添加 cache-loader，将结果缓存在磁盘中减少编译时间
参考
vite & snowpack 原理
掘金参考vite
掘金参考snowpack
vite
vite 主要特点是基于浏览器 native 的 ES module (/en-US/docs/Web/JavaScript/Reference/Statements/import) 来开发，省略打包这个步骤，因为需要什么资源直接在浏览器里引入即可。
vite —— 一个由 vue 作者尤雨溪开发的 web 开发工具，它具有以下特点：
参考
1、快速的冷启动
2、即时的模块热更新
3、真正的按需编译
snowpack
- nowpack 是一款闪电般快速的前端构建工具，专为现代 Web 设计。 它是开发工作流程中更重、更复杂的打包程序（如 webpack 或 Parcel）的替代品。Snowpack 利用 JavaScript 的原生模块系统（称为 ESM）来避免不必要的工作，无论您的项目有多大，都能保持快速。
一旦你尝试过，就不可能回到其他任何事情上。
从这段介绍可以看出，Snowpack 的特点就是——快！
snowpack 的最初版核心目标就是不再打包业务代码，而是直接使用浏览器原生的 JavaScript Module 能力。
所以从它的处理流程上来看，对业务代码的模块，基本只需要把 ESM 发布（拷贝）到发布目录，再将模块导入路径从源码路径换为发布路径即可。
而对 node_modules 则通过遍历 中的依赖，按该依赖列表为粒度将 node_modules 中的依赖打包。以 node_modules 中每个包的入口作为打包 entry，使用 rollup 生成对应的 ESM 模块文件，放到 web_modules 目录中，最后替换源码的 import 路径，是得可以通过原生 JavaScript Module 来加载 node_modules 中的包。
- import { createElement, Component } from "preact";
- import htm from "htm";
+ import { createElement, Component } from "/web_modules/";
+ import htm from "/web_modules/";
- 1
- 2
- 3
- 4
- 5