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

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

书面解释

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

为什么要有集成方案?

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

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

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

  

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

其次,编码阶段

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

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

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

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

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

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

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

  

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

  

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

然后,测试

最后,发生产

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

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

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

时间: 2024-11-05 12:27:58

前端集成方案——理论(一)的相关文章

前端集成方案——运用(一)

针对移动端的页面用fis来构建一个例子 开发目录设计,采用以模块为核心. 开发目录 部署目录 fis-conf代码 /*启动插件*/ /*fis.config.set('modules.postpackager', 'simple');*/ fis.config.set('roadmap.domain', { '**.*' : 'http://10.25.5.29:8000/target' }); fis.config.set('roadmap.path', [ { /* 去掉test目录*/

小程序的持续集成方案

半年前,有机会开始接触微信小程序开发.却因为只是接触而并没投入开发小程序的过程中,因此对很多小程序的细节并未有充分的理解,仅仅停留在了解类似的理论层面,比如mpvue修改了 Vue.js 的 runtime 和 compiler 实现了编译及运行在原生小程序能力,比如原生小程序不支持npm包的使用及管理等,当然那时候的技术细节难点都是由非常给力的好同事解决消化了,所以也没多去细究. 最近,我开始投入到完成的小程序开发迭代里,却发现一个头痛的问题,如何准确并快速的的把小程序上传去后台,并让测试人员

前端优化方案

前端优化: 1.模块化常见的模块化方案有:AMD.CMD.UMD.ES6 2.缓存   电商项目将常用数据缓存起来,比如,移动端首页的数据,商品分类等这些不经常变化的数据,目的是为了 增强 移动端Android.iOS 响应速度.   在controller 收到用户请求后判断 ehcache中有没有缓存这个数据,没有就加载这个资源(数据库或者文件中)然后丢到缓存中, 如果调用了这些数据的添加修改删除方法就删除这个缓存   3.图片懒加载 插件资源https://github.com/zhany

前端集成解决方案小结

前端集成解决方案 why? 浅谈前端集成解决方案 慕课网教程 项目大了就要考虑管理的问题 1,开发团队代码风格不统一,如何强制开发规范: 2,前期开发的组件库如何维护和使用: 3,如何模块化前端项目: 4,服务器部署前必须的压缩,检查流程如何简化,流程如何完善

执行 $ Gulp 时发生了什么 —— 基于 Gulp 的前端集成解决方案(二)

前言 文章 在windows下安装gulp —— 基于 Gulp 的前端集成解决方案(一) 中,已经完成对 gulp 的安装,由于是window环境,文中特意提到了可以通过安装 gitbash 来代替 window 系统的 CMD 命令行工具.本节主要围绕 如何使用 Gulp 完成一个预编译 SASS 文件的任务 来逐步熟悉 Gulp . 本文地址:http://www.cnblogs.com/leonkao/p/4611102.html Gulp 概述 Gulp 是一个构建工具,通过自动化处理

常用 Gulp 插件汇总 —— 基于 Gulp 的前端集成解决方案(三)

前两篇文章讨论了 Gulp 的安装部署及基本概念,借助于 Gulp 强大的 插件生态 可以完成很多常见的和不常见的任务.本文主要汇总常用的 Gulp 插件及其基本使用,需要读者对 Gulp 有一个基本的了解.如果你对 Gulp 还不是很了解,可以通过下面两篇文章快速了解 Gulp . 由于几乎所有的插件都有非常友好的使用文档,所以本文不讨论涉及插件使用的东西,仅是一个汇总.排名不分先后. 本系列文章导航: 一.基于 Gulp 的前端集成解决方案 —— 在windows下安装gulp 二.基于 G

持续集成方案

大纲 构建 版本控制 部署 单元测试 架构文档化 命名约定 数据库伸缩性 自动化 反馈 实践 引言: 持续集成的前身: 在使用持续集成之前,很多开发团队都是用每日构建(nightly build).当时,微软使用这个实践很多年了.谁破坏了构建,就要负责监视后续的构建构成,直至发现下一个破坏了构建的人. 为什么要使用持续集成? 对于大多数项目来说,采纳持续集成实践是向高效率和高质量迈进的一大步.它保证那些创建大型复杂系统的团队具有高度的自信心和控制力.一旦代码提交引入了问题,持续集成就能为我们提供

JEESZ分布式框架--单点登录集成方案

  JEESZ分布式框架单点登录集成方案第一节:单点登录简介 第一步:了解单点登录SSO主要特点是: SSO应用之间使用Web协议(如HTTPS) ,并且只有一个登录入口.SSO的体系中有下面三种角色:1) User(多个)2) Web应用(多个)3) SSO认证中心(一个) SSO实现包含以下三个原则:1) 所有的登录都在 SSO 认证中心进行.  2) SSO认证中心通过一些方法来告诉Web应用当前访问用户究竟是不是通过认证的用户.  3) SSO认证中心和所有的 Web 应用建立一种信任关

构建一个基本的前端自动化开发环境 —— 基于 Gulp 的前端集成解决方案(四)

通过前面几节的准备工作,对于 npm / node / gulp 应该已经有了基本的认识,本节主要介绍如何构建一个基本的前端自动化开发环境. 下面将逐步构建一个可以自动编译 sass 文件.压缩 javascript 文件.多终端多浏览器同步测试的开发环境,并且还可以通过 piblish 命令对项目下的文件进行打包操作. 相关连接导航 在windows下安装gulp —— 基于 Gulp 的前端集成解决方案(一) 执行 $Gulp 时发生了什么 —— 基于 Gulp 的前端集成解决方案(二) 常