webpack核心四要素总结

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了webpack核心四要素总结相关的知识,希望对你有一定的参考价值。

参考技术A 入口:webpack 应该使用哪个模块,来作为构建其内部依赖图的开始。进入入口起点后,webpack 会找出有哪些模块和库是入口起点(直接和间接)依赖的。参数定义了打包后的入口文件,可以是个字符串或数组或者是对象;如果是数组,数组中的所有文件会打包生成一个filename文件;如果是对象,可以将不同的文件构建成不同的文件。

可以通过在 webpack 配置中配置 entry 属性,来指定一个入口起点(或多个入口起点)。默认值为 ./src。

entry:

   app: './src/main.js'

 

出口:webpack 在哪里输出它所创建的 bundles,以及如何命名这些文件,默认值为 ./dist。基本上,整个应用程序结构,都会被编译到你指定的输出路径的文件夹中。你可以通过在配置中指定一个 output 字段,来配置这些处理过程。

path: 打包文件存放的绝对路径

publicPath: 网站运行时的访问路径

filename:打包后的文件名

当我们在entry中定义构建多个文件时,filename可以对应的更改为[name].js用于定义不同文件构建后的名字。

output:

    path: config.build.assetsRoot,

    filename: '[name].js',

    publicPath: process.env.NODE_ENV ==='production'

      ? config.build.assetsPublicPath

      : config.dev.assetsPublicPath

 

Loader:webpack 能够去处理那些非javascript 文件(webpack 自身只理解JavaScript)。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块,然后你就可以利用 webpack 的打包能力,对它们进行处理。

在webpack中JavaScript,CSS,LESS,TypeScript,JSX,CoffeeScript,图片等静态文件都是模块,不同模块的加载是通过模块加载器(webpack-loader)来统一管理的。loaders之间是可以串联的,一个加载器的输出可以作为下一个加载器的输入,最终返回到JavaScript上。

loader:loader的名称(必须)

include/exclude:手动添加必须处理的文件(文件夹)或屏蔽不需要处理的文件(文件夹)(可选);

query:为loaders提供额外的设置选项(可选)



        test: /\.vue$/,

        loader: 'vue-loader',

        options: vueLoaderConfig

      ,

     

        test: /\.js$/,

        loader: 'babel-loader',

        include: [resolve('src'),resolve('test'), resolve('node_modules/webpack-dev-server/client')]

     

插件:插件目的在于解决 loader 无法实现的其他事。插件是一个具有 apply 属性的 JavaScript 对象。apply 属性会被 webpack compiler 调用,并且 compiler 对象可在整个编译生命周期访问。

plugins: [

    new webpack.DefinePlugin(

      'process.env':require('../config/dev.env')

    ),

    new webpack.HotModuleReplacementPlugin(),

    new webpack.NamedModulesPlugin(), // HMRshows correct file names in console on update.

    new webpack.NoEmitOnErrorsPlugin(),

    //https://github.com/ampedandwired/html-webpack-plugin

    new HtmlWebpackPlugin(

      filename: 'index.html',

      template: 'index.html',

      inject: true

    ),

    // copy custom static assets

    new CopyWebpackPlugin([

     

        from: path.resolve(__dirname,'../static'),

        to: config.dev.assetsSubDirectory,

        ignore: ['.*']

     

    ])

  ]

微服务架构核心要素总结

软件架构是一个包含各种组织的系统组织,这些组件包括 Web服务器, 应用服务器, 数据库,存储, 通讯层), 它们彼此或和环境存在关系。系统架构的目标是解决利益相关者的关注点。

Conway’s law: Organizations which design systems[...] are constrained to produce designs which are copies of the communication structures of these organizations.

(设计系统的组织,其产生的设计和架构等价于组织间的沟通结构。)

Monolithic架构

微服务架构核心要素总结


Monolithic比较适合小项目,优点是:

开发简单直接,集中式管理, 基本不会重复开发

功能都在本地,没有分布式的管理开销和调用开销。它的缺点也非常明显,特别对于互联网公司来说(不一一列举了):

开发效率低:所有的开发在一个项目改代码,递交代码相互等待,代码冲突不断

代码维护难:代码功能耦合在一起,新人不知道何从下手

部署不灵活:构建时间长,任何小修改必须重新构建整个项目,这个过程往往很长

稳定性不高:一个微不足道的小问题,可以导致整个应用挂掉

扩展性不够:无法满足高并发情况下的业务需求

微服务架构

        微服务是指开发一个单个小型的但有业务功能的服务,每个服务都有自己的处理和轻量通讯机制,可以部署在单个或多个服务器上。微服务也指一种种松耦合的、有一定的有界上下文的面向服务架构。也就是说,如果每个服务都要同时修改,那么它们就不是微服务,因为它们紧耦合在一起;如果你需要掌握一个服务太多的上下文场景使用条件,那么它就是一个有上下文边界的服务,这个定义来自DDD领域驱动设计。

相对于单体架构和SOA,它的主要特点是组件化、松耦合、自治、去中心化,体现在以下几个方面:

  • 一组小的服务 
    服务粒度要小,而每个服务是针对一个单一职责的业务能力的封装,专注做好一件事情。

  • 独立部署运行和扩展 
    每个服务能够独立被部署并运行在一个进程内。这种运行和部署方式能够赋予系统灵活的代码组织方式和发布节奏,使得快速交付和应对变化成为可能。

  • 独立开发和演化 
    技术选型灵活,不受遗留系统技术约束。合适的业务问题选择合适的技术可以独立演化。服务与服务之间采取与语言无关的API进行集成。相对单体架构,微服务架构是更面向业务创新的一种架构模式。

  • 独立团队和自治 
    团队对服务的整个生命周期负责,工作在独立的上下文中,自己决策自己治理,而不需要统一的指挥中心。团队和团队之间通过松散的社区部落进行衔接。

        我们可以看到整个微服务的思想就如我们现在面对信息爆炸、知识爆炸是一样的:通过解耦我们所做的事情,分而治之以减少不必要的损耗,使得整个复杂的系统和组织能够快速的应对变化。

我们为什么采用微服务呢?

"让我们的系统尽可能快地响应变化" - Rebecca Parson 

让我们的系统尽可能快地去响应变化。其实几十年来我们一直在尝试解决这个问题。如果一定要在前面加个限制的话,那就是低成本的快速响应变化。上世纪90年代Kent Beck提出要拥抱变化,在同期出现了诸多轻量级开发方法(诸如 XP、Scrum);2001年敏捷宣言诞生,之后又出现了精益、看板等新的管理方式。如果说,这些是为了尽快的响应变化,在软件开发流程和实践方面提出的解决方案,那么微服务架构就是在软件技术和架构层面提出的应对之道。


微服务架构核心要素总结 

Autonomous 
A Microservice is a unit of functionality; it provides an API for a set of capabilities oriented around a business domain or common utility

Isolated 
A Microservice is a unit of deployment; it can be modified, tested and deployed as a unit without impacting other areas of a solution

Elastic 
A Microservice is stateless; it can be horizontally scaled up and down as needed

Resilient 
A Microservice is designed for failure; it is fault tolerant and highly available

Responsive 
A Microservice responds to requests in a reasonable amount of time

Intelligent 
The intelligence in a system is found in the Microservice endpoints not ‘on the wire’

Message Oriented 
Microservices rely on HTTP or a lightweight message bus to establish a boundary between components; this ensures loose coupling, isolation, location transparency, and provides the means to delegate errors as messages

Programmable 
Microservices provide API’s for access by developers and administrators

Composable 
Applications are composed from multiple Microservices

Automated 
The lifecycle of a Microservice is managed through automation that includes development, build, test, staging, production and distribution

服务之间如何通信

微服务架构核心要素总结

 

一般同步调用比较简单,一致性强,但是容易出调用问题,性能体验上也会差些,特别是调用层次多的时候。RESTful和RPC的比较也是一个很有意 思的话题。一般REST基于HTTP,更容易实现,更容易被接受,服务端实现技术也更灵活些,各个语言都能支持,同时能跨客户端,对客户端没有特殊的要 求,只要封装了HTTP的SDK就能调用,所以相对使用的广一些。RPC也有自己的优点,传输协议更高效,安全更可控,特别在一个公司内部,如果有统一个 的开发规范和统一的服务框架时,他的开发效率优势更明显些。就看各自的技术积累实际条件,自己的选择了。而异步消息的方式在分布式系统中有特别广泛的应用,他既能减低调用服务之间的耦合,又能成为调用之间的缓冲,确保消息积压不会冲垮被调用方,同时能 保证调用方的服务体验,继续干自己该干的活,不至于被后台性能拖慢。不过需要付出的代价是一致性的减弱,需要接受数据最终一致性;还有就是后台服务一般要 实现幂等性,因为消息发送出于性能的考虑一般会有重复(保证消息的被收到且仅收到一次对性能是很大的考验);最后就是必须引入一个独立的broker,如 果公司内部没有技术积累,对broker分布式管理也是一个很大的挑战。

 

微服务架构核心要素总结

微服务优点

  • 每个微服务都很小,这样能聚焦一个指定的业务功能或业务需求。

  • 微服务能够被小团队单独开发,这个小团队是2到5人的开发人员组成。

  • 微服务是松耦合的,是有功能意义的服务,无论是在开发阶段或部署阶段都是独立的。

  • 微服务能使用不同的语言开发。

  • 微服务允许容易且灵活的方式集成自动部署,通过持续集成工具,如Jenkins, bamboo 。

  • 一个团队的新成员能够更快投入生产。

  • 微服务易于被一个开发人员理解,修改和维护,这样小团队能够更关注自己的工作成果。无需通过合作才能体现价值。

  • 微服务允许你利用融合最新技术。

  • 微服务只是业务逻辑的代码,不会和HTML,CSS 或其他界面组件混合。

  • 微服务能够即时被要求扩展。

  • 微服务能部署中低端配置的服务器上。

  • 易于和第三方集成。

  • 每个微服务都有自己的存储能力,可以有自己的数据库。也可以有统一数据库。

微服务架构的缺点

  • 微服务架构可能带来过多的操作。

  • 需要DevOps技巧 (http://en.wikipedia.org/wiki/DevOps).

  • 可能双倍的努力。

  • 分布式系统可能复杂难以管理。

  • 因为分布部署跟踪问题难。

  • 当服务数量增加,管理复杂性增加。

需要考虑的问题

  • 单个微服务代码量小,易修改和维护。但是,系统复杂度的总量是不变的,每个服务代码少了,但服务的个数肯定就多了。就跟拼图游戏一样,切的越碎,越难拼出整幅图。一个系统被拆分成零碎的微服务,最后要集成为一个完整的系统,其复杂度肯定比大块的功能集成要高很多。

  • 单个微服务数据独立,可独立部署和运行。虽然微服务本身是可以独立部署和运行的,但仍然避免不了业务上的你来我往,这就涉及到要对外通信,当微服务的数量达到一定量级的时候,如何提供一个高效的集群通信机制成为一个问题。

  • 单个微服务拥有自己的进程,进程本身就可以动态的启停,为无缝升级的打好了基础,但谁来启动和停止进程,什么时机,选择在哪台设备上做这件事情才是无缝升级的关键。这个能力并不是微服务本身提供的,而是需要背后强大的版本管理和部署能力。

  • 多个相同的微服务可以做负载均衡,提高性能和可靠性。正是因为相同微服务可以有多个不同实例,让服务按需动态伸缩成为可能,在高峰期可以启动更多的相同的微服务实例为更多用户服务,以此提高响应速度。同时这种机制也提供了高可靠性,在某个微服务故障后,其他相同的微服务可以接替其工作,对外表现为某个设备故障后业务不中断。同样的道理,微服务本身是不会去关心系统负载的,那么什么时候应该启动更多的微服务,多个微服务的流量应该如何调度和分发,这背后也有一套复杂的负载监控和均衡的系统在起作用。

  • 还有一些企业级关注的系统问题,比如,安全策略如何集中管理?系统故障如何快速审计和跟踪到具体服务?整个系统状态如何监控?服务之间的依赖关系如何管理?等等这些问题都不是单个微服务考虑的范畴,而需要有一个系统性的考虑和设计,让每个微服务都能够按照系统性的要求和约束提供对应的安全性,可靠性,可维护性的能力。

微服务架构核心要素总结

API为什么很重要

•服务价值的精华体现 
•可靠、可用、可读 
•只有一次机会

微服务架构核心要素总结

实现一个API网关作为所有客户端的唯一入口。API网关有两种方式来处理请求。有些请求被简单地代理/路由到合适的服务上,其他的请求被转给到一组服务。

微服务架构核心要素总结

于提供普适的API,API网关根据不同的客户端开放不同的API。比如,Netflix API网关运行着客户端特定的适配器代码,会向客户端提供最适合其需求的API。

API网关也可以实现安全性,比如验证客户端是否被授权进行某请求。

设计要素

•Version 
•RequstID 
•Auth&Signature 
•RateLimit 
•Docs 
•ErrorCode&Message

微服务架构核心要素总结 

微服务治理

•按需伸缩 
–部署与监控运维成本 
•独立部署 
–机器数量与部署成本 
•业务独立 
–服务依赖、治理,版本管理、事务处理 
•技术多样性 
–环境部署成本、约定成本

•运行状态治理 
–监控、限流、SLA、LB、日志分析 
•服务注册与发现 
•部署 
–快速、复制、扩容 
–单机开发 
•调用 
–安全、容错、服务降级、调用延时

微服务架构核心要素总结

微服务架构核心要素总结 

服务容错

     当企业微服务化以后,服务之间会有错综复杂的依赖关系,例如,一个前端请求一般会依赖于多个后端服务,技术上称为1 -> N扇出. 在实际生产环境中,服务往往不是百分百可靠,服务可能会出错或者产生延迟,如果一个应用不能对其依赖的故障进行容错和隔离,那么该应用本身就处在被拖垮的风险中。在一个高流量的网站中,某个单一后端一旦发生延迟,可能在数秒内导致所有应用资源(线程,队列等)被耗尽,造成所谓的雪崩效应(Cascading Failure),严重时可致整个网站瘫痪。

微服务架构核心要素总结

服务依赖

微服务架构核心要素总结

服务框架

  1. 服务注册、发现、负载均衡和健康检查,假定采用进程内LB方案,那么服务自注册一般统一做在服务器端框架中,健康检查逻辑由具体业务服务定制,框架层提供调用健康检查逻辑的机制,服务发现和负载均衡则集成在服务客户端框架中。

  2. 监控日志,框架一方面要记录重要的框架层日志、metrics和调用链数据,还要将日志、metrics等接口暴露出来,让业务层能根据需要记录业务日志数据。在运行环境中,所有日志数据一般集中落地到企业后台日志系统,做进一步分析和处理。

  3. REST/RPC和序列化,框架层要支持将业务逻辑以HTTP/REST或者RPC方式暴露出来,HTTP/REST是当前主流API暴露方式,在性能要求高的场合则可采用Binary/RPC方式。针对当前多样化的设备类型(浏览器、普通PC、无线设备等),框架层要支持可定制的序列化机制,例如,对浏览器,框架支持输出Ajax友好的JSON消息格式,而对无线设备上的Native App,框架支持输出性能高的Binary消息格式。

  4. 配置,除了支持普通配置文件方式的配置,框架层还可集成动态运行时配置,能够在运行时针对不同环境动态调整服务的参数和配置。

  5. 限流和容错,框架集成限流容错组件,能够在运行时自动限流和容错,保护服务,如果进一步和动态配置相结合,还可以实现动态限流和熔断。

  6. 管理接口,框架集成管理接口,一方面可以在线查看框架和服务内部状态,同时还可以动态调整内部状态,对调试、监控和管理能提供快速反馈。Spring Boot微框架的Actuator模块就是一个强大的管理接口。

  7. 统一错误处理,对于框架层和服务的内部异常,如果框架层能够统一处理并记录日志,对服务监控和快速问题定位有很大帮助。

  8. 安全,安全和访问控制逻辑可以在框架层统一进行封装,可做成插件形式,具体业务服务根据需要加载相关安全插件。

  9. 文档自动生成,文档的书写和同步一直是一个痛点,框架层如果能支持文档的自动生成和同步,会给使用API的开发和测试人员带来极大便利。Swagger是一种流行Restful API的文档方案。

微服务系统底座

一个完整的微服务系统,它的底座最少要包含以下功能:

  • 日志和审计,主要是日志的汇总,分类和查询

  • 监控和告警,主要是监控每个服务的状态,必要时产生告警

  • 消息总线,轻量级的MQ或HTTP

  • 注册发现

  • 负载均衡

  • 部署和升级

  • 事件调度机制

  • 资源管理,如:底层的虚拟机,物理机和网络管理

以下功能不是最小集的一部分,但也属于底座功能:

  • 认证和鉴权

  • 微服务统一代码框架,支持多种编程语言

  • 统一服务构建和打包

  • 统一服务测试

  • 微服务CI/CD流水线

  • 服务依赖关系管理

  • 统一问题跟踪调试框架,俗称调用链

  • 灰度发布

  • 蓝绿部署

容器(Docker)与微服务

•容器够小 
–解决微服务对机器数量的诉求 
•容器独立 
–解决多语言问题 
•开发环境与生产环境相同 
–单机开发、提升效率 
•容器效率高 
–省钱 
•代码/image一体化 
–可复用管理系统 
•容器的横向与纵向扩容 
–可复制 
–可动态调节CPU与内存

容器(Docker)与微服务

•Image管理 
•系统安全管理 
•授权管理 
•系统成熟度 
•社区成熟度

开发方式影响

随着持续交付概念推广以及Docker容器普及,微服务将这两种理念和技术结合起来,形成新的微服务+API + 平台的开发模式,提出了容器化微服务的持续交付概念。 
下图传统Monolithic的DevOps开发队伍方式:

微服务架构核心要素总结

这种整体型架构要求产品队伍横跨产品管理 Dev开发 QA DBA 以及系统运营管理,而微服务架构引入以后,如下图:

微服务架构核心要素总结

微服务促进了DevOps方式的重组,将一个大臃肿的整体产品开发队伍切分为根据不同微服务的划分的产品队伍,以及一个大的整体的平台队伍负责运营管理,两者之间通过API交互,做到了松耦合隔绝。

微服务架构核心要素总结

微服务架构核心要素总结

  • 首先需要考虑构建DevOps能力,这是保证微服务架构在持续交付和应对复杂运维问题的动力之源;

  • 其次保持服务持续演进,使之能够快速、低成本地被拆分和合并,以快速响应业务的变化;

  • 同时要保持团队和架构对齐。微服务貌似是技术层面的变革,但它对团队结构和组织文化有很强的要求和影响。识别和构建匹配架构的团队是解决问题的另一大支柱。

  • 最后,打造持续改进的自组织文化是实施微服务的关键基石。只有持续改进,持续学习和反馈,持续打造这样一个文化氛围和团队,微服务架构才能持续发展下去,保持新鲜的生命力,从而实现我们的初衷。

    微服务的实施是有一定的先决条件:基础的运维能力(如监控、快速配置、快速部署)需提前构建,否则就会陷入如我们般被动的局面。推荐采用基础设施及代码的实践,通过代码来描述计算和网络基础设施的方法,使得图案度i可以快速安全的搭建和处理由新的配置代替的服务器,服务器之间可以拥有更高的一致性,降低了在“我的环境工作,而你的环境不工作”的可能,也是为后续的发布策略和运维提供更好的支撑。

微服务架构核心要素总结

由于Docker引入,不同的微服务可以使用不同的技术架构,比如Node.js Java Ruby Python等等,这些单个的服务都可以独立完成交付生命周期,如下:

微服务架构核心要素总结

微服务案例

Netflix的微服务架构如下,着重全球分发 高可扩展性和可用性:

Twitter的微服务架构,注重高效的可扩展的数据中心:

出处:https://www.cnblogs.com/wintersun/p/6219259.html


以上是关于webpack核心四要素总结的主要内容,如果未能解决你的问题,请参考以下文章

webpack总结篇

使用 Webpack 编写 12 要素应用程序?

前端工程化9:Webpack构建流程分析,Webpack5源码解读

Vue&webpack入门实践

webpack 基本打包方法

big webpack