软件开发行业前端部前端工程师网页开发手册.docxVIP

软件开发行业前端部前端工程师网页开发手册

第1章项目初始化与工程结构

1.1主流构建工具选择与配置

在决定使用Vite还是Webpack之前，需首先明确项目规模与团队技术栈。对于小型单页应用（SPA），Vite凭借其极快的热更新速度和零打包时间，已成为首选；而大型组件库项目或需要深度自定义打包逻辑时，Webpack提供了更强大的插件生态。配置构建工具的核心在于`package.json`的`scripts`字段。例如，使用Vite时，`dev:preview`命令会启动开发服务器并自动在浏览器中打开预览窗口，而`build`命令则直接执行打包，无需手动运行`npmrunbuild`。

开发环境搭建时必须先安装依赖，但需严格区分`node_modules`目录下的包与生产环境所需的包。通过`npminstall`仅安装开发依赖，通过`npminstall--production`安装生产依赖，以避免开发过程中文件增长过快导致性能下降。构建配置文件`vite.config.js`或`webpack.config.js`中需明确指定`output.gzip`和`output.br`的大小，例如设为500KB和200KB，这直接影响CDN压缩后的文件大小和加载速度。在`vite.config