(19)国家知识产权局 (12)发明 专利申请 (10)申请公布号 (43)申请公布日 (21)申请 号 202210531301.1 (22)申请日 2022.05.16 (71)申请人 银盛支付 服务股份有限公司 地址 518000 广东省深圳市龙华区民治街 道新区大道 997号远景家园五楼5 01 (72)发明人 潘信璋　 (74)专利代理 机构 深圳市深可信专利代理有限 公司 44599 专利代理师 彭光荣 (51)Int.Cl. G06F 8/41(2018.01) G06F 9/445(2018.01) (54)发明名称 一种前端应用 工程项目构建包体积的优化 方法 (57)摘要 本发明提供了一种前端应用 工程项目构建 包体积的优化方法， 涉及计算机技术领域， 该方 法包括S1、 使用Vue技术栈， 通过vue ‑cli脚手架 构建项目， 通过VisualStudio  Code开发工具完 成前端应用的功能编写， 得到已完全功能需求的 前端应用工程项目； S2、 对所述前端应用工程项 目的构建进行分析检测， 确定各模块的体积占 比； S3、 根据所述各模块的体积占比， 前往前端应 用工程项目移除map文件， 减小前端资源包体积； S4、 对所述前端应用工程项目的代码进行压缩， 输出带有Gzip压缩格式文件的前端应用资源包， 将该前端应用资源包部署到目标服务器； S5、 对 所述目标服务器对进行配置， 使浏览器根据需要 加载Gzip压缩格式文件， 有效的减小Vue构建后 的项目包体积， 提升页面的加载速度， 解决了首 屏加载不 流畅、 白屏等问题。 权利要求书2页 说明书8页 附图1页 CN 114968255 A 2022.08.30 CN 114968255 A 1.一种前端应用工程项目构建包体积的优化方法， 其特 征在于： 包括以下的步骤： S1、 使用Vue技术栈， 通过vue ‑cli脚手架构建项目， 通过Visual  Studio Code开发工具 完成前端应用的功能编写， 得到已完全功能需求的前端应用工程项目； S2、 对所述前端应用工程项目的构建进行分析检测， 确定各模块的体积占比； S3、 根据所述各模块的体积占比， 前往前端应用工程项目移除map文件， 减小前端资源 包体积； S4、 对所述前端应用工程项目的代码进行压缩， 输出带有Gzip压缩格式文件 的前端应 用资源包， 将该前端应用资源 包部署到目标服 务器； S5、 对所述目标服 务器对进行配置， 使浏览器根据需要加载Gzip压缩格式文件。 2.如权利要求1所述的一种前端应用工程项目构建包体积的优化方法， 其特征在于： 所 述步骤S2,包括以下的步骤： S21、 将所述的基于vue ‑cli脚手架构建的前端应用工程项目安装使用webpack分析工 具插件webpack ‑bundle‑analyzer， 在前端应用工程项目内， 前往终端运行插件安装命令 npm install webpack‑bundle‑analyzer ‑‑save‑dev或者npm  install webpack‑bundle‑ analyzer ‑D， 将webpack 分析工具插件webpack‑bundle‑analyzer安装到 所述前端应用工程 项目中； S22、 前往前端应用工程项目的项目表述文件p ackage.json中的scripts脚本属性， 配 置脚本执 行命令"analyzer ":"npm_co nfig_repor t＝true npm run build"； S23、 前往前端应用工程项目的可选配置文件vue.config.js中， 对webpack分析工具插 件webpack ‑bundle‑analyzer的使用进行配置； S24、 将所述的config配置完成并保存后， 前往前端应用工程项目所在终端运行npm   run analyzer来运行webpack ‑bundle‑analyzer插件并对所述前端应用工程项目进行分 析， 查看前端应用工程项目各模块文件的体积占比， 并进行分析。 3.如权利要求2所述的一种前端应用工程项目构建包体积的优化方法， 其特征在于： 所 述步骤S3中， 前往前端应用工程项目移除map文件， 包括以下的步骤： 前往前端应用工程项 目的所述可选配置文件vue.config.js， 配置生产源映射productionSourceMap属性为 false。 4.如权利要求3所述的一种前端应用工程项目构建包体积的优化方法， 其特征在于： 所 述步骤S4， 包括以下的步骤： S41、 前往前端应用工程项目终端执行插件安装命令npm  install terser‑webpack‑ plugin‑‑save‑dev， 安装terser ‑webpack‑plugin插件； S42、 前往所述前端应用工程项目的所述可选配置文件vue.config.js中， 配置打包生 产输出Gzip压缩格式文件的属性productionGzip设置true， 需要压缩文件的文件类型数组 producti onGzipExtensi ons为['js' ,'css']； S43、 在当前可选配置文件vue.config.js对去除日志插件terser ‑webpack‑plugin进 行使用配置； S44、 前往前端应用工程项目下终端运行前端应用打包命令npm  run build构建工程打 包， 即可自动对代码进行压缩， 并输出 带有Gzip压缩格式文件的前端应用资源 包； S45、 将所述前端应用资源 包部署到目标服 务器。权　利　要　求　书 1/2 页 2 CN 114968255 A 25.如权利要求1所述的一种前端应用工程项目构建包体积的优化方法， 其特征在于： 所 述步骤S5， 包括以下的步骤： S51、 前往目标服 务器， 配置web服 务器Nginx， 开启服 务器的Gzip的支持； S52、 浏览器访问该前端应用资源包， 自动下载目标服务器对应的Gzip压缩格式文件使 用。 6.如权利要求1所述的一种前端应用工程项目构建包体积的优化方法， 其特征在于： 还 包括以下的步骤： S6、 统一技术栈， 统一 技术选型， 减少同类型功能的组件使用； S7、 通过CDN的方式把一部分插件放到CDN上， 前端应用工程项目里仅保留必要的插件 和组件库； S8、 对组件库资源的使用按需加载。 7.如权利要求6所述的一种前端应用工程项目构建包体积的优化方法， 其特征在于： 所 述步骤S6， 包括以下的步骤： 依据技术选型， 统一组件库， 界面布局移动端用Vant组件库， PC端用Element组件库， 网 络用xios、 vuex统一管理用户状态， E Charts图表按需使用； 和/或， 将当前不满足需求需要的组件， 对该组件库进行二次封装； 和/或， 对于具有同样功能的插 件， 选择轻量的。 8.如权利要求7所述的一种前端应用工程项目构建包体积的优化方法， 其特征在于： 所 述步骤S7， 包括以下的步骤： S71、 经过CDN加速， CDN即内容分发网络Content  Delivery  Network， 通过在现有的 Internet中增加一层新的CACHE层， 将网站的内容发布到最接近用户的网络边缘的节点， CDN将源站的资源缓存到位于全球各地的CDN节点上， 用户请求资源时， 就近返回节点上缓 存的资源； S72、 使用CDN剔除vendors文件中不经常变化的公共库； S73、 使用CDN资源， 通过超文本标记语言html里的脚本script标签将前端框架vue、 路 由插件vue ‑router、 状态管理插件vuex、 网络请求插件axios、 常用功能js代码库jquery引 入； S74、 通过超文本标记语言html里的脚本script标签引入插件后， 前往前端应用工程项 目的可选配置文件 vue.config.js， 加入 模块打包工具webpack配置代码； S75、 配置好webpack后， 通过CDN引入， 前往前端应用工程项目， 去除原有已使用过的 vue.use相关代码。 9.如权利要求6所述的一种前端应用工程项目构建包体积的优化方法， 其特征在于： 所 述步骤S8中， 对组件库资源的使用按需加载， 通过以下的步骤实现： 前往vant和ECharts组件库的使用处， 改变组件的引入方式为按需引入。 10.如权利要求1所述的一种前端应用工程项目构建包体积的优化方法， 其特征在于： 所述步骤S2之后， 还包括以下的步骤： 前往https://tinypng.com/， 将前端应用工程项目中 的目标图片进行 无损压缩处 理， 将经过压缩处 理的图片替换原有未处 理的图片。权　利　要　求　书 2/2 页 3 CN 114968255 A 3