原文链接：https://github.com/helloyoucan/knowledge
webpack
1、优化
打包体积优化
- 提取第三方库或通过引用外部文件的方式引入第三方库（externals）
- 使用压缩插件
ParallelUglifyPlugin - 按需加载资源文件
require.ensure()和import() - 单独打包
css文件（ExtractTextPlugin） - 去除不必要的插件，开发环境和生产环境单独使用配置文件
- 优化
devtool中的source-map - 服务器启用
gzip压缩 - 动态链接库（DllPlugin），单独编译一些不经常改变的代码，比如node_modules的第三方库
打包效率
- 开发环境使用增量构建（
CommonsChunkPlugin+chunkhash+manifest+webpack-md5-hash），启用热更新 - 开发环境不做无意义的工作如提取
css计算文件hash等 - 选择合适的loader
- 个别loader开启cache 如babel-loader
- 第三方库采用引入方式替代
- 提取公共代码
- 优化构建时的搜索路径，指明需要构建目录及不需要构建的目录，减小文件搜索范围
- 模块化引入需要的部分
- 使用支持多线程构建的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、热更新原理
- 当修改了一个或多个文件时
- 文件系统接收更改并通知webpack
- webpack重新编译构建一个或多个模块，并通知HMR服务器进行更新
- HMR Server使用webscoket通知HMR runtime 需要更新，HMP运行通过HTTP请求更新jsonp
- 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实现原理
- 执行工程自身preinstall（若有的话）
- 确定首层依赖模块
- 获取模块
- 模块扁平化（dedupe）
- 安装模块
- 执行工程自身声明周期
模块化进程
-
IIFE（立即调用函数表达式）
使用自执行函数来编写模块化，特点：在一个单独的函数作用域中执行代码，避免变量冲突
(function(){ return { } })()
-
AMD
使用requireJS 来编写模块化，特点：依赖必须提前声明好。
define('./index.js',function(code){ // code 就是index.js 返回的内容 }) -
CMD
使用seaJS 来编写模块化，特点：支持动态引入依赖文件。
define(function(require, exports, module) { var indexCode = require('./index.js'); }); -
CommonJS
nodejs 中自带的模块化。
module.exports={ } var fs = require('fs'); -
webpack(require.ensure)
webpack 2.x 版本中的代码分割。
-
ES Modules
export default{} import a from 'a';
Token
- token和cookie都是首次登陆时，由服务器下发，充当交互时进行验证的功能，作用都是为无状态的HTTP提供的持久机制。
- token存储地方无限制
- 对于token，服务器不需要保存会话，当用户logout时cookie和服务器的session都会注销，但token只是注销浏览器信息
特点
- 无状态、可扩展（服务器不存储会话，分布式）
- 支持移动设备
- 跨程序调用
- 安全（防止CSRF）
