前端轻语

根据 demo 配置，将 demo 跑起来，然后忽略掉分支剧情，只分析 Vue 运行的主流程。

引入 Vue 和 App

执行 index.js, 先执行：

1
2

import Vue from 'vue';
import App from './app.vue';

• 变量 Vue 为 Vue 的构造函数，在执行 Vue 文件的过程中，会初始化设置 Vue 上的原型变量方法，Watch 类，Dep 类等等。
• 变量 App 为经过 webpack 编译，通过 vue-loader，vue-template-compiler，VueLoaderPlugin 作用后的包含 render 和 staticRenderFns 的组件选项对象:

项目准备

拉取 vue 代码到本地仓库，并切换版本到 v2.6.11：

1
2

git clone https://github.com/vuejs/vue.git
git checkout v2.6.11

进入 vue 文件夹根目录下安装依赖：

1

yarn

前言

Vue 是一套用于构建用户界面的渐进式框架，被设计为可以自底向上逐层应用。本系列不会刻意梳理讲解 API 及 Vue 的用法，官方文档已经有清晰的讲解。

本系列文章作为笔记，用于记录 vue2.x 的构建（含组件）主流程。

概览

根据 vue 构建 demo 的生命周期及其数据变化的更新作为流程线及相关，本系列文章一共分为以下章节：

原文链接 https://juejin.im/post/5d1ecb96f265da1b6d404433

什么是跨域

当一个资源从与该资源本身所在的服务器不同的域、协议、端口请求一个资源时，资源会发起一个跨域 HTTP 请求。

出于安全原因，浏览器做出了一些限制，跨站请求可以正常发起，但是返回结果被浏览器拦截了。

什么是同源策略

在移动互联网时代，信息安全越来越重要。前端方面也面临着越来越多的安全挑战，本文收集了网上各位大佬的分析总结，将持续整理总结常见的安全问题及其防御措施。

CSRF

CSRF 概念

CSRF（Cross-site request forgery）跨站请求伪造：攻击者诱导受害者进入第三方网站，在第三方网站中，向被攻击网站发送跨站请求。利用受害者在被攻击网站已经获取的注册凭证(cookies 等)，绕过后台的用户验证，达到冒充用户对被攻击的网站执行某项操作的目的。

CSRF 攻击流程

原文链接：https://github.com/tcatche/tcatche.github.io/issues/22

柯里化

柯里化，是把接受多个参数的函数变换成接受一个单一参数（最初函数的第一个参数）的函数，并且返回接受余下的参数而且返回结果的新函数的技术。

柯里化，作为高阶函数的一种应用，是一个逐步接收参数的过程。

1
2
3
4
5
6
7
8
9
10
11
12

var add = (x, y) => x + y;

var curriedAdd = (x) => (y) => x + y;
var addOne = curriedAdd(1);

var addTen = curriedAdd(10);

addOne(5);
// 6

addTen(5);
// 15

先看 async / await 异步解决方案

1
2
3
4
5
6
7
8
9
10
11
12
13
14

// sleep 函数，返回一个 Promise 对象
function sleep(ms) {
  return new Promise((resolve, reject) => {
    setTimeout(resolve, ms);
  });
}

async function test() {
  // 循环 100 次
  for (let i = 0; i < 100; i++) {
    // 等待 100ms 再返回
    await sleep(100);
  }
}

通过 babel 编译成 Generator 与 Promise

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

function _asyncToGenerator(fn) {
  return function () {
    var gen = fn.apply(this, arguments);
    return new Promise(function (resolve, reject) {
      function step(key, arg) {
        try {
          var info = gen[key](arg);
          var value = info.value;
        } catch (error) {
          reject(error);
          return;
        }
        if (info.done) {
          resolve(value);
        } else {
          return Promise.resolve(value).then(
            function (value) {
              return step('next', value);
            },
            function (err) {
              return step('throw', err);
            }
          );
        }
      }
      return step('next');
    });
  };
}
function sleep(ms) {
  return new Promise((resolve, reject) => {
    setTimeout(resolve, ms);
  });
}
let test = (function () {
  var ref = _asyncToGenerator(function* () {
    for (let i = 0; i < 100; i++) {
      yield sleep(100);
    }
  });
  return function test() {
    return ref.apply(this, arguments);
  };
})();

从上相关直观的看出来如何使用 Generator 与 Promise 进行的异步解决方案。

原文链接：https://segmentfault.com/a/1190000014951691?utm_source=tag-newest

块级作用域的出现

通过 var 声明的变量存在变量提升的特性：

1
2
3
4

if (condition) {
  var value = 1;
}
console.log(value);

初学者可能会觉得只有 condition 为 true 的时候，才会创建 value，如果 condition 为 false，结果应该是报错，然而因为变量提升的原因，代码相当于：

总结至 MDN

forEach

forEach() 方法按升序为数组中含有效值的每一项执行一次 callback 函数，那些已删除或者未初始化的项将被跳过。

forEach 语法

1

arr.forEach(callback(currentValue [, index [, array]])[, thisArg]);

前面一至十一章，介绍了在 development 的模式下，整个完整了构建主流程。在了解构建流程的基础上，本章整理一些与 webpack 优化相关的知识点。

production 模式

我们参考 production 模式里，里面已经做了大部分的优化，如压缩，Scope Hoisting， tree-shaking 等都给予了我们启发，接下来具体分析各个点。

production 模式启用的插件

• FlagDependencyUsagePlugin
  • 触发时机：compilation.hooks.optimizeDependencies
  • 功能：标记模块导出中被使用的导出，存在 module.usedExports 里。用于 Tree shaking。
  • 对应配置项：optimization.usedExports:true
• FlagIncludedChunksPlugin
  • 触发时机：compilation.hooks.optimizeChunkId
  • 功能：给每个 chunk 添加了 ids，用于判断避免加载不必要的 chunk
• ModuleConcatenationPlugin
  • 触发时机：compilation.hooks.optimizeChunkModules
  • 功能：使用 esm 语法可以作用域提升(Scope Hoisting)或预编译所有模块到一个闭包中，提升代码在浏览器中的执行速度
  • 对应配置项：optimization.concatenateModules:true
• NoEmitOnErrorsPlugin
  • 触发时机：compiler.hooks.shouldEmit，compilation.hooks.shouldRecord
  • 功能：如果在 compilation 编译时有 error，则不执行 Record 相关的钩子，并且抛错和不编译资源
• OccurrenceOrderModuleIdsPlugin，OccurrenceOrderChunkIdsPlugin
  • 注意不是文档写的 OccurrenceOrderPlugin，这个没用
  • 触发时机：compilation.hooks.optimizeModuleOrder，compilation.hooks.optimizeChunkOrder
  • 功能：根据模块初始调用次数或者总调用次数排序（配置），这样在后面分配 ID 的时候常被调用 ID 就靠前，除此之外，还可以让 id 为路径，hash 等。
  • 对应配置项：optimization.occurrenceOrder，optimization.chunkIds，optimization.moduleIds
• SideEffectsFlagPlugin
  • 触发时机：normalModuleFactory.hooks.module，compilation.hooks.optimizeDependencies
  • 功能：
    • normalModuleFactory.hooks.module 钩子里读取 package.json 里的 sideEffects 字段和读取 module.rule 里的 sideEffects 赋给 module.factoryMeta（纯的 ES2015 模块)；
    • compilation.hooks.optimizeDependencies 钩子里根据 sideEffects 配置，删除未用到的 export 导出
  • 对应配置项：optimization.sideEffects:true（默认）
• TerserPlugin
  • 触发时机：template.hooks.hashForChunk，compilation.hooks.optimizeChunkAssets
  • 功能：
    • 在 template.hooks.hashForChunk 钩子即在 chunks 生成 hash 阶段会把压缩相关的信息也打入到里面
    • 在 compilation.hooks.optimizeChunkAssets 钩子触发资源压缩事件
  • 对应配置项：
    • optimization.minimize 是否开启压缩
    • optimization.minimizer 定制 Terser，默认开启多进程压缩和缓存