功能
2024年9月13日大约 5 分钟
特色
@yangzw/bruce-app提供的功能都为零配置开箱即用，也能通过配置文件覆盖默认配置。
命令功能
内置功能
- 选择模式：提供
开发环境、测试环境、预览环境和生产环境四种模式，每种模式对应不同构建配置和优化方案 - 监听端口：使用开发模式时，启动本地服务器并监听指定协议域名端口，可以自动打开浏览器访问网页
- 局部刷新：启用
vite内置Hot Module Replacement，增量更新css文件和js文件，修哪更哪，无需刷新网页就能实时预览修改结果并保存当前数据状态 - 判断入口：快速扫描应用指定的入口文件路径，判断它是否存在且合法，以便递归的方式构建每个文件及其依赖文件，构建应用时以入口文件作为根节点，必须得保证其存在且合法
- 插入垫片：根据应用的浏览器兼容性自动插入垫片，兼容低版本浏览器
- 动态导入：可用动态导入语法(
import().then())，处理代码时会单独分离这个模块，执行网页对应操作时才加载这个模块，使用就加载不使用就不加载(代码懒加载)，减少首屏加载代码大小和渲染时间 - 编译代码：内置
CSS编译器(postcss/scss/less)和JS编译器(babel/typescript)分别编译样式和脚本，开发时可用最新特性或草案规范的语法，使得代码更加简洁优雅，提高代码的可读性 - 校验代码：确保编写的语法没有错误，统一规范团队协作的编码规范和编码风格，减少代码冗余，在保证代码语法正确的前提下提高代码的可读性
- 分割代码：构建业务代码，将其分割为
WebpackRuntime代码块、第三方依赖代码块和应用业务代码块三大部分 - 合并代码：整合相同模块、相同功能和复用多次的代码，起到减包作用
- 友好提示：当遇到警告和错误时输出高亮的代码片段和解决方案，帮助开发人员定位问题
- 压缩合并：
- 代理接口：使用
proxy反向代理服务端接口，解决接口跨域问题 - 处理资源：内置
asset，用于处理字体、图像、音频和视频等媒体资源，图像小于10k时转换为Base64 - 提升作用：启用
webpack内置Scope Hoisting，分析模块之间的依赖关系，将构建好的模块合并到一个函数中，起到减包作用 - 摇树优化：启用
webpack内置Tree Shaking，禁止babel将代码转换为CJS规范，使用ESM规范的静态声明特性去除不被引用或不被执行的代码块，起到减包作用 - 缓存优化：开启文件哈希化之后，根据文件哈希值是否发生变化执行构建操作，哈希没有变化的文件直接从缓存中获取，减少构建生成文件的时间
- 缓存文件：首次构建速度可能慢一些，构建之后会生成本地缓存文件，以便提高后续再次构建的速度
- 哈希文件：可以对生成文件设置哈希值，只有文件内容修改才会修改哈希值，用于长缓存优化
- 时化目录：可以时间序列化命名输出的应用根目录，增加时间戳区分版本
- 分析打包：可在构建之后展示构建依赖的关系，根据关系图合理分析模块
- 定制配置：当部分配置不符合实际需求时，可以通过应用根目录中的配置文件修改默认配置，构建启动时就会使用这个配置文件覆盖默认配置