前端工程化

前端工程化是什么?为什么我们需要工程化,以前直接开撸页面的方法不行了么?看了第一章,有这么几点想法,以前的方法不是不行了,只是原来的方法无法适应现在快节奏的开发迭代工作,同时,我们要适应新标准等等,我们需要工程化来帮助我们完成一些基础工作。总的来说,我们工程化要解决的问题是开发、测试、部署的工作,我们能够通过脚手架、本地服务器、构建系统以及部署、持续集成等工程化解决方案来加快我们的工作。

脚手架

脚手架最开始是建筑领域的词汇,引申到软件开发领域,它是作为一种创建项目初始文件的工具,它能够帮助我们快速生成初始代码结构、功能模块的基本配置、自动安装依赖等等。

脚手架的本质就是要完成以下功能:

  1. 快速生成配置
  2. 降低框架学习成本
  3. 令业务开发人员关注业务逻辑本身

(Yeoman)整个脚手架的流程就是先收集用户配置、转化动态内容,然后自动安装依赖模块。

脚手架就是帮助开发人员只专注于业务开发,同时,也能够统一公司规范和开发模式。

构建系统

构建系统也是整个工程化中最复杂的一项,但幸运的是我们现在拥有一些不错的工具来帮助我们完成这项工作。

构建主要分几个主要方面:

  1. 语言方面,也就是 ECMAScript 标准、CSS 预编译、HTML 模板渲染等
  2. 优化方面,依赖打包、资源嵌入、文件压缩、hash 指纹等等
  3. 部署方面,域名/路径改变、文件名改变等

JavaScript 构建

那么我们要如何对 JavaScript 进行构建呢?

这时就要使用到一些工具了,比如 Webpack、Babel 来实现。

// babel-loader 配置
module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader',
        options: [require('babel-plugin-transform-object-rest-spread')]
      }
    }
  ];
}
1
2
3
4
5
6
7
8
9
10
11
12
13

CSS 预编译和 PostCSS

css 看起来有什么缺陷呢?那就是它的弱编程能力,以及浏览器对规范的实现方案各一。

现阶段一般的解决方案是使用 CSS 预编译加上 PostCSS 进行处理。

模块化与组件化

  • 模块化和组件化的区别主要体现在颗粒度层面。

模块化有什么价值呢?

  1. 解决命名冲突问题
  2. 可以使代码复用
  3. 便于依赖管理
  4. 提高可维护性
  5. 利与性能优化(比如按需加载 import() 函数)

知识点:

  • CommonJS(适用于 JavaScript 模块化,不适合浏览器,因为浏览器有 CSS、图片等资源,同步加载)、AMD、CMD、ES6 Module(import () 函数满足按需加载需求)
  • webpack 提供了 require.ensure,但是 import() 非常有可能称为正式的规范

增量更新和缓存

缓存主要分两种,一种是本地存储,一种是 HTTP 缓存策略。

HTTP 缓存主要分协商缓存和强制缓存两种策略。

  1. 强制缓存:Expire 和 max-age,Expire 是指定一个明确的过期时间点,缺点是这个过期时间点是服务器的时间。为了解决这个问题,HTTP 1.1 新增了 Cache-control 首部信息,它有以下几种常见信息:no-cache 和 no-store、private 和 public、max-age。主要使用的 max-age 来指定过期时间,它是指定从请求发起的时间开始计算,此响应的缓存副本有效时间。
  2. 协商缓存:Etag 和 If-none-match,Etag 是服务器为资源分配的字符串形式唯一标识,作为响应头部返回给客户端。浏览器在 Cache-control 指定 no-cache、max-age、Expire 都过期了,就会将这个字符串作为 If-none-match 的值发送给服务端,如果没有变化就返回 304,更新 Cache-control,有变化就分配新的 Etag。

覆盖更新和增量更新

使用 hash 指纹的方式可以实现增量更新。

webpack 可以帮助我们实现增量更新:

hash 与 chunkhash,hash 是整个项目,只要有一个文件有变动就会更新所有编译后的文件,明显不符合增量更新,而 chunkhash 是符合的。

css 文件使用 contenthash 来进行增量更新。

PS:剩下的本地开发服务器 webpack 有相应的解决方案,部署倾向于使用 docker 的容器化技术,方便快捷,工作流是常用的 git flow 工作流。

Last Updated: 8/19/2019, 10:45:46 AM