怎样开发和部署前端代码

怎样开发和部署前端代码

概念：
304 协商缓存 需和服务器通信一次
本地缓存 通过更新资源路径，让游览器主动加载新资源
只有文件变化，才会导致相应url 变更，文件级别的精确缓存控制

提升网站性能
静态资源和动态网页分集群部署
静态资源部署在各个CDN节点上

前端工程中关于静态资源缓存要面临的优化和部署问题：
先上线静态资源还说先上线页面？
这里面存在时间间隔，会导致期间用户访问页面发生错乱的问题

用非覆盖式发布解决，先部署静态资源，再灰度部署页面

静态资源优化方案，基本上要实现这么几个东西：

1. 配置超长时间的本地缓存 —— 节省带宽，提高性能
2. 采用内容摘要作为缓存更新依据 —— 精确的缓存控制
3. 静态资源CDN部署 —— 优化网络请求
4. 更资源发布路径实现非覆盖式发布 —— 平滑升级

静态资源路径md5化
web pack html-webpack-plugin

基于web pack 前端工程环境搭建
webapp/ # webapp根目录

• src/ # 开发目录
  • css/ # css资源目录
  • img/ # webapp图片资源目录
  • js/ # webapp js&jsx资源目录
    • components/ # 标准组件存放目录
      • foo/ # 组件foo
        • css/ # 组件foo的样式
        • js/ # 组件foo的逻辑
        • tmpl/ # 组件foo的模板
          index.js # 组件foo的入口
      • bar/ # 组件bar
    • lib/ # 第三方纯js库
      ... # 根据项目需要任意添加的代码目录
  • tmpl/ # webapp前端模板资源目录
    a.html # webapp入口文件a
    b.html # webapp入口文件b
• assets/ # 编译输出目录，即发布目录
  • js/ # 编译输出的js目录
  • img/ # 编译输出的图片目录
  • css/ # 编译输出的css目录
    a.html # 编译输出的入口a
    b.html # 编译处理后的入口b

• mock/ # 假数据目录
  app.js # 本地server入口
  routes.js # 本地路由配置
  webpack.config.js # webpack配置文件
  gulpfile.js # gulp任务配置
  package.json # 项目配置
  README.md # 项目说明

webpack的三个概念：模块（module）、入口文件（entry）、分块（chunk）
load npm模块
资源引用
一切资源都被当作模块

require() 时还可以在 资源path 前面指定loader，可覆盖配置文件里的配置
require("!style!css!less!bootstrap/less/bootstrap.less");
// “bootstrap.less”这个资源会先被"less-loader"处理，
// 其结果又会被"css-loader"处理，接着是"style-loader"
// 可类比pipe操作

webpack原理
内部实现了一个全局的webpackJsonp()用于加载处理后的资源，并且把资源进行重新编号，每一个资源成为一个模块，对应一个id，后边是模块的内部实现。

对图片的输出：
//24:
//function(module, exports) {

module.exports = "data:image/png;base64,...";

/***/

}

对css文件
默认内嵌到js里边，运行时用style标签内联。可以使用ExtractTextPlugin插件将css提取用link标签引入