前端集成方案—

集成方案在项目中的地位？

书面解释

前端集成方案指的是将前端开发领域中所有的技术元素集中到一起，对常见问题提供一套解决方案。

为什么要有集成方案？

前端达到一定规模后，一些孤立的技术元素(模块化、打包、部署、压缩合并、组件管理...)就成为束缚了研发人员的瓶颈。

好，接下来我们以研发流程为主线，来探讨集成方案究竟应该包含哪些，需要哪些。

首先，你需要建个工程，工程在前端就是目录结构

　　包划分讲究得是以什么为核心，为什么这么划分。至于命名，尽量遵守通用的命名。

其次，编码阶段

　　写法要统一，你一个JS类太大了，要拆分成几个类，几个文件，他们之间要依赖吧。这叫写法规范和依赖管理。这两者合起来叫模块化。

类型	代表框架	优点	缺点	目的	原理
AMD	RequireJS	依赖不需要字面解析	和NodeJS遵循的规范不一致	统一写法按需加载依赖的JS	通过关键字define强制你按模块化的规范写；加载依赖<script src>标签+load事件
CMD	SeaJS	和NodeJS遵循的规范相同	不能直接压缩，需屏蔽require字符等依赖需通过toString静态分析	统一写法按需加载依赖的JS	通过关键字define强制你按模块化的规范写；加载依赖<script src>标签+load事件

推荐大家使用SeaJS,因为它的源码中文注释，书籍github一大堆。非常容易看懂。像我这种有英文障碍的就很高兴。而且它是国人开发的，具体谁我就不说了，反正你们都知道。　　　

接下来，编得差不多了，需要编译打包

gzip压缩是配置apache的http.conf文件，响应头Content-Encoding:gzip

图片不进行gzip压缩，是压缩后不一定不小，甚至会稍微变大。

我想问个问题，模块化有前端框架，压缩合并有没有。没有！为什么呢？前端语言读文件有安全限制，你没法主动去访问、读取文件。需要后台语言，通过IO流去读它，过滤它的空格，回车符，按规则替换它的变量名，这就是压缩。同样的合并，通过IO流写到一个文件里。

编译打包完了，做做通用的性能优化

CDN服务器配的，cache-controller、304等也是配的。至于HTML5 的web存储不兼容IE，且它最适合的是离线程序。我们主要关注的就是压缩合并。

然后，测试

最后，发生产

发生产有覆盖式发布和非覆盖式发布两种

整个研发流程过完了。我列出来前端研发过程中，除应用框架以外的技术元素。

这些元素放到一起集中处理的方案就叫前端集成方案。点这。

转载于:https://www.cnblogs.com/mominger/p/4077986.html

前端集成方案——理论(一)相关推荐

微前端系列讲解--应用集成方案（qiankun+umi+vue）
1. 微前端项目架构及选型介绍 1.1. 微前端选型概述微前端架构是一种类似于微服务的架构,它将微服务的理念应用于浏览器端,即将 Web 应用由单一的单体应用转变为多个小型前端应用聚合为一的应用.考 ...
Web前端持续集成方案（四）
五.利用jenkins实现web前端项目持续集成上文中,我们已经介绍了利用grunt检测并打包web前端项目的方案.下面我们结合jenkins介绍 web前端项目持续集成方案. Grunt已经完成了 ...
element vue 动态单选_软件更新丨vue-element-admin 4.0.0 beta 发布，后台集成方案
vue-element-admin 4.0.0 beta 发布了. vue-element-admin 是一个后台集成解决方案,它基于 vue 和 element.它使用了最新的前端技术栈,内置了 i ...
系列《使用sklearn进行集成学习——理论》《使用sklearn进行集成学习——实践》目录 1 Random Forest和Gradient Tree Boosting参数详解 2 如何调参？
系列 <使用sklearn进行集成学习--理论> <使用sklearn进行集成学习--实践> 目录 1 Random Forest和Gradient Tree Boosting ...
下面关于html的描述正确的一项是,1 x 证书 Web 前端开发初级理论考试试卷五（2）...
1+x 证书 web 前端开发初级对应课程分析 http://blog.zh66.club/index.php/archives/194/ 1+X 证书 Web 前端开发中级对应课程分析 http:/ ...
supersu二进制更新安装失败_Q音直播编译优化与二进制集成方案
一.背景: Q音直播抽离成pod库分别引入到QQ音乐和Fan直播两个独立app中,而对于直播业务来讲,直播SDK通过pod本地引入集成到Demo中进行日常直播业务的开发,通过Demo来精简工程规模,提 ...
c++ 输出二进制_Q音直播编译优化与二进制集成方案
一.背景: Q音直播抽离成pod库分别引入到QQ音乐和Fan直播两个独立app中,而对于直播业务来讲,直播SDK通过pod本地引入集成到Demo中进行日常直播业务的开发,通过Demo来精简工程规模,提 ...
前端集成解决方案（webpack、gulp）
一.什么是前端集成解决方案 FIS(Front-end Integrated Solution)是专为解决前端开发中自动化工具.性能优化.模块化框架.开发规范.代码部署.开发流程等问题的工具框架. 二 ...
完整项目持续集成方案
完整项目持续集成方案 [docker|jenkins|git] 工具本次持续集成使用到工具有:jenkins.maven.jdk.docker.docker私服[register].git. 发布流 ...

前端集成方案——理论(一)

前端集成方案——理论(一)相关推荐

最新文章

热门文章