4.webpack&常见概念

原文链接：https://github.com/helloyoucan/knowledge

webpack

1、优化

打包体积优化

1. 提取第三方库或通过引用外部文件的方式引入第三方库（externals）
2. 使用压缩插件ParallelUglifyPlugin
3. 按需加载资源文件require.ensure()和import()
4. 单独打包css文件（ExtractTextPlugin）
5. 去除不必要的插件，开发环境和生产环境单独使用配置文件
6. 优化devtool中的source-map
7. 服务器启用gzip压缩
8. 动态链接库（DllPlugin），单独编译一些不经常改变的代码，比如node_modules的第三方库

打包效率

1. 开发环境使用增量构建（CommonsChunkPlugin+chunkhash+manifest+webpack-md5-hash），启用热更新
2. 开发环境不做无意义的工作如提取css计算文件hash等
3. 选择合适的loader
4. 个别loader开启cache 如babel-loader
5. 第三方库采用引入方式替代
6. 提取公共代码
7. 优化构建时的搜索路径，指明需要构建目录及不需要构建的目录，减小文件搜索范围
8. 模块化引入需要的部分
9. 使用支持多线程构建的loader或插件，并行编译

2、Loader

loader就是一个node模块，它输出了一个函数。当某种资源需要用这个loader转换时，这个函数会被调用。并且，这个函数可以通过提供给它的this上下文访问Loader API。

编写一个loader

// 定义
module.exports = function(src) {
  //src是原文件内容（abcde），下面对内容进行处理，这里是反转
  var result = src.split('').reverse().join(''); 
  //返回JavaScript源码，必须是String或者Buffer
  return `module.exports = '${result}'`;
}
// 使用
{
    test: /\.txt$/,
    use: [
        {
             loader: path.resolve('./path/reverse-txt-loader')
        }
    ]
}

3、热更新原理

1. 当修改了一个或多个文件时
2. 文件系统接收更改并通知webpack
3. webpack重新编译构建一个或多个模块，并通知HMR服务器进行更新
4. HMR Server使用webscoket通知HMR runtime 需要更新，HMP运行通过HTTP请求更新jsonp
5. HMR运行时替换更新中的模块，如果确定这些模块无法更新，则触发整个页面刷新

Flux

核心逻辑：数据和逻辑单向流动。

• dispatcher（调度程序）
• stores（存储）
• views （视图）

缺点：Flux冗余的代码多，每个应用中需要手动创建dispatcher实例，在一个应用中含有多个store。

<img src="/images/flux.png" style="width:500px;"/>

Redux vs Flux

	Redux	Flux
store	各个store合成一个	多个store
更新store	在reducer中	在store中
Dispatcher	没有Dispatcher，使用reducer纯函数处理事件，	使用Dispatcher调度事件

MVC

将业务数据（model）与用户界面（view）隔离，用控制器（controller）管理逻辑和用户输入

• Model # 保存应用数据，与后端交互或同步数据，校验数据。与业务数据相关，与应用内交互状态无关
• View # Model的可视化，表示当前状态的视图。前端view负责构建和维护DOM元素
• Controller # 链接view和model，model的变化会应用到view中，view的操作会通过controller应用到model中

缺点

项目越大，逻辑越复杂，导致数据流动方式混乱。

<img src="/images/mvc.png" style="width:500px;"/>

MVVM

<img src="/images/mvvm.png"/>

NPM

1. npm模块安装机制

• 发出npm install 命令
• 查询node_modules目录中是否已经存在指定模块
  • 若存在，不重新安装
  • 若不存在
    • npm 向registry（注册表）查询模块压缩包的网址
    • 下载压缩包，存放在根目录的.npm目录里
    • 解压压缩包到当前目录的node_modules目录

2.npm实现原理

1. 执行工程自身preinstall（若有的话）
2. 确定首层依赖模块
3. 获取模块
4. 模块扁平化（dedupe）
5. 安装模块
6. 执行工程自身声明周期

模块化进程

1. IIFE（立即调用函数表达式）

   使用自执行函数来编写模块化，特点：在一个单独的函数作用域中执行代码，避免变量冲突

   (function(){
     return {
    
     }
   })()
   

2. AMD

   使用requireJS 来编写模块化，特点：依赖必须提前声明好。

   define('./index.js',function(code){
    // code 就是index.js 返回的内容
   })
   

3. CMD

   使用seaJS 来编写模块化，特点：支持动态引入依赖文件。

   define(function(require, exports, module) {  
     var indexCode = require('./index.js');
   });
   

4. CommonJS

   nodejs 中自带的模块化。

   module.exports={
   
   }
   var fs = require('fs');
   

5. webpack(require.ensure)

   webpack 2.x 版本中的代码分割。

6. ES Modules

   export default{}
   import a from 'a';
   

Token

• token和cookie都是首次登陆时，由服务器下发，充当交互时进行验证的功能，作用都是为无状态的HTTP提供的持久机制。
• token存储地方无限制
• 对于token，服务器不需要保存会话，当用户logout时cookie和服务器的session都会注销，但token只是注销浏览器信息

特点

• 无状态、可扩展（服务器不存储会话，分布式）
• 支持移动设备
• 跨程序调用
• 安全（防止CSRF）