zoukankan      html  css  js  c++  java
  • 《前端工程化体系设计与实践》-笔记

    github 地址:https://github.com/boijs/boi

    这篇博客是我对《前端工程化体系设计与实践》做的笔记,这本书本身讲的也是比较范的东西,只是给出整体的前端搭建工程的解决方案,具体的实现细节,还是需要我们自己一个一个去查,然后结合自己的项目去深入了解。

    本书的思维导图

    前端工程化
体系设计与实践.jpeg

    第一章 前端工程简史

    image

    前后端分离形态

    image

    工程化方案整体架构

    image

    第2章 脚手架

    sails.js node.js全栈MVC框架
    yeoman 开放的脚手架平台,不封装任何具体方案

    第3章 构建

    自动生成CSS Sprites功能实现借助于插件postcss-sprites

    模块化开发 1.CommonJS 2.AMD/CMD--着力于浏览器的模块和规范

    1. ES6 module import export

    3.6 增量更新与缓存 1)本地缓存:LocalStorage, SessionStorage

    1. http缓存策略:强制缓存和协商缓存

    Expires和max-age

     image

    Etag和If-none-match

     image

    增量更新:

    为文件加hash值

    hash和chunkhash

    contenthash是由ExtractTextPlugin插件提供

    3.7.2 compiler compilation

    第4章 本地开发服务器

    Mock服务

    json-server

    4.2 动态构建

    webpack-dev-middleware

    lazy-是否开启惰性模式

    watchOptions-监听细节配置

    Livereload 跟HMR的区别

    Livereload 的原理是在浏览器和服务器之间创建websocket连接,服务器端在执行完动态编译之后发送reload事件至浏览器,浏览器接收到此事件之后刷新整个页面 

    image

    HMR Hot Module Replacement

    以局部更新取代整体更新

     image

    4.3.2 异步数据接口

    MockServer 用node搭建的服务

    1. Local模式
    2. Proxy模式 express-http-proxy
    3. DefinePlugin和环境变量

    第5章 部署

    5.1 审查代码

    5.2 Apache设置缓存策略

    第6章 工作流

    6.1 本地工作流

     image

     

    6.1.2 代码分离与测试沙箱

     image

     

     

    6.2 云平台工作流

     image

     

     

    6.2.1 gitflow与版本管理

     image

     

  • 相关阅读:
    Flex基础知识
    Java -version与配置的Path环境变量不一致
    Oracle 11g不能导出空表的问题解决(转)
    深入浅出JSONP--解决ajax跨域问题(转)
    Ubuntu 16.04安装docker
    观察者模式 —— java.util.Observable + java.util.Observer 源码学习
    Hashtable的contains() 、containsKey()和containsValue() 区别
    《Java核心技术卷1》拾遗
    openTSDB (rpm)安装 + Grafana 视图
    整合 springboot 和 swagger出问题
  • 原文地址:https://www.cnblogs.com/ppxyq/p/10623100.html
Copyright © 2011-2022 走看看