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

     

  • 相关阅读:
    CentOS7搭建SFTP服务
    MySQL主从异常恢复
    MySQL主从复制配置
    Docker安装MySQL8.0
    CentOS7安装JDK1.8
    RabbitMQ死信队列
    RabbitMQ重试机制
    RabbitMQ消息可靠性传输
    TCP/IP的Socket编程
    c#网络编程使用tcpListener和tcpClient
  • 原文地址:https://www.cnblogs.com/ppxyq/p/10623100.html
Copyright © 2011-2022 走看看