chuanjing-blog

[chuanjing-blog]

模块化规范

模块化规范

前言

起初js作为一个不起眼的脚本语言，寄存于html中，以内联的形式，或者以script的形式运行于浏览器中。与后端语言相比，简直是蛮荒的，黑暗的。代码管理混乱，多个script引入，且需要管理script先后顺序，代码揉成一团，闭包多且可读性差。对于开发和维护人员而言，简直就是地狱。

可幸的是，有一哥们神奇的发现js可以跑在服务器下面，于是哐当哐当他造了一番，于是大名鼎鼎的nodejs出场了。nodejs可是服务器代码，像前端这样可不行，于是nodejs就提出了 commonjs 规范。

Commonjs 规范

什么是commonjs规范？

commonjs是nodejs开发规范，目的是为了模块化开发提出的规范。对于nodejs而言，每个文件相当于一个模块，模块必定有一个输入方法module.exports，该模块对于引用方则是一个一个参数后者函数，通过require引用。如此以来，就实现了nodejs的模块化，方便代码管理。

index.js

a.js

b.js

a.js

let a = 1 a += 100 module.exports = a

b.js

let b = 100 b += 1 module.exports = b

index.js

var a = require('./a.js') var b = require('./b.js') console.log(a + b) // 202

由于nodejs的文件只存在本地，那么对于commonjs来说，他们的模块加载都是同步的，不存在网络请求。

requirejs

随着commonjs的提出，那么浏览器端jser们可不淡定了，一直处于浏览蛮荒时代的jser也揭竿起义，也要把这个混乱局面整理一下了。requirejs主张的事依赖关系前置，举个例子，小明是一个小学生，在上课前，小明习惯把所有的书都摆好，上课时候爱看哪本就直接用哪本，不用再去书包里拿了。这个呢，我们喊他AMD规范。

于是又有一哥们发明了requirejs这个玩意儿。requirejs这是干什么的呢？

requirejs是一个实现前端模块化管理的工具库，它的特点是

他解决了2个大问题：

实现js文件的异步加载，避免网页失去响应；

管理模块之间的依赖性，便于代码的编写和维护。

官网

seajs

又有一哥们（阿里玉伯）觉得requrejs不好，他觉得书放出来太占地方，不能好好趴着睡觉，他喜欢在上课的时候用到哪本就去书包找哪本。于是弄出一个叫seajs的玩意儿。seajs提倡的是按需加载。我们喊他CMD规范。

官网

es module

作为老大哥的ECMA怎么可以让你们抢了风头，于是在es6提出了 module 标准。老大哥的话谁敢不听，不听也可以其实，module的提出完全可以覆盖到commonjs 和 amd 规范，成为通用的解决方案，老大哥的地位不是盖的，给个赞。

es module的语法和文法十分优美，可比什么commonjs，seajs，requirejs好看多了，大家可以访问module学习一下。

由于历史原因，模块这一块只出现于开发编译前阶段，需要通过工具把他们转化成当代浏览器可执行的代码，gulp，webpack等。

[chuanjing-blog]

gulp

Gulp

Gulp是一个基于流的自动化构建工具。我们可以根据需求制定多个task，灵活执行当中task，可以打包雪碧图，压缩html，压缩js文件，压缩图片，压缩css，补全css等。

优点

易于使用

构建快速

插件高质量

易于学习

常用插件

gulp-autoprefixer 自动补全css前缀

sprity 生成雪碧图

gulp-uglify 丑化js

gulp-babel 转义es6为es5

gulp-concat 合并js

gulp-sass 使用sass预处理器

gulp-postcss 使用postcss

gulp-imagemin 压缩图片

gulp-htmlmin 压缩html

gulp-server

gulp-browser-sync 浏览器自动刷新

Gulp 和 webpack 对比

Gulp 是一款基于流的自动化构建工具。gulp 致力于自动化和优化开发工作流。基于流的作业方式适合多页面应用开发，对输入（gulp.src）的 js，ts，scss，less 等源文件依次执行打包（bundle）、编译（compile）、压缩、重命名等处理后输出（gulp.dest）到指定目录中去，为了构建而打包。

Webpack 一个万能模块打包器。通用模块打包加载器，致力于模块化js，css等文件，通过loader和插件形式打包代码。适用于模块化开发（spa），对入口文件（entry）递归解析生成依赖关系图，然后将所有依赖打包在一起，在打包之前会将所有依赖转译成可打包的 js 模块，为了打包而构建，可以打包一切资源，适配各种模块系统。

[chuanjing-blog]

常见安全问题

常见安全问题���防范策略

SQL注入

通过用户输入特殊字符，伪造sql语句，获得访问数据库权限

例子

userName = '1' or 1=1 pwd = '1' or 1=1

防范

对常见sql语句进行转义，过滤

增加验证码功能

前后端约定特殊字符转义规则

上线前，要求测试组进行安全测试

XSS 跨站脚本功攻击

通过用户输入，恶意插入可执行代码保存后，再次打开页面前端便执行该恶意代码

例子

// 在input插入可执行js代码，伪造表单 <script> console.log(123) </script>

储存型 XSS

存储型 XSS 的恶意代码存在数据库里，伪造用户操作，执行恶意攻击。

反射型 XSS

反射型 XSS 的恶意代码存在 URL 里，伪造用户操作，执行恶意攻击。

DOM型 XSS

DOM 型 XSS 攻击中，取出和执行恶意代码由浏览器端完成，属于前端 JavaScript 自身的安全漏洞，而其他两种 XSS 都属于服务端的安全漏洞。

防范措施

用户操作提交，防止脚本类攻击执行。

编码，就是转义用户的输入，把用户的输入解读为数据而不是代码。

校验，对用户的输入及请求都进行过滤检查，如对特殊字符进行过滤，设置输入域的匹配规则等。

在网关设置xss安全过滤器

上线前，要求测试组测试

工具推荐

js-xss

CSRF 中文是跨站点请求伪造

CSRF（Cross Site Request Forgery），中文是跨站点请求伪造。CSRF攻击者在用户已经登录目标网站之后，诱使用户访问一个攻击页面，利用目标网站对用户的信任，以用户身份在攻击页面对目标网站发起伪造用户操作的请求，达到攻击目的。

CSRF攻击是源于Web的隐式身份验证机制！Web的身份验证机制虽然可以保证一个请求是来自于某个用户的浏览器，但却无法保证该请求是用户批准发送的。CSRF攻击的一般是由服务端解决。

防御策略

验证码，重要接口可以强制用户使用验证码。

token校验，在多数请求下面加入token，在服务器网管严重是否为安全请求。

约定校验规则，在网关验证校验规则。

服务器Cookie校验请求是否为安全请求。

Referer校验，在网关设置请求Referer校验是否为安全请求。（防止图片盗链）

get请求比token请求更容易伪造。

上线前，要求测试组测试

网络（DNS）劫持攻击

从浏览器到服务器，或者从服务器到浏览器的数据传输过程中，中间会经过很多代理层，那么这些代理层就存在被攻击篡��的风险。比如DNS篡改注入广告。

防御策略

使用https。

对数据进行加密，客户端加密，只有服务端能解开，非对称加密。

利用跳转模仿网站（钓鱼）

举个例子，有很多平台app会开放连接跳转功能，假设某攻击者模仿一个与风格类似的连接欺骗用户，从而盗取用户数据。

iframe内部安全问题

iframe是第三方引入的html网页，拥有很多权限，这属于外部连接，应该削减其权限，可以设计sandbox设置权限。

allow-forms：允许iframe中提交form表单 allow-popups：允许iframe中弹出新的窗口或者标签页（例如，window.open()，showModalDialog()，target=”_blank”等等） allow-scripts：允许iframe中执行JavaScript allow-same-origin：允许iframe中的网页开启同源策略

文件伪装

举个例子，某攻击者在网站上传了一个后缀名为.png的js文件，当上传完成显示后，这个js通过请求后自动执行，攻击了该网站。

这是由于浏览器请求该文件时，浏览器根据响应内容推断，发现这是一个js文件，并且执行了。

防御策略

X-Content-Type-OptionsHTTP 设置为 nosniff，浏览器则强制当前格式（png）渲染。

[chuanjing-blog]

call-apply-bind

CALL, APPLY, BIND

目录

简介

Call

语法

返回值

描述

使用场景

使用call方法调用父构造函数

使用call方法调用匿名函数

使用call方法调用函数并且指定上下文的'this'

使用call方法调用函数并且没有确定第一个参数argument

apply

案例

bind

引用

总结

call 和 apply是立即执行函数，返回值为绑定函数执行返回值；

bind 下是得到一个绑定函数，需要手动出发调用；

call, bind, apply无法改变箭头函数的this，但可以改变上级this从而改变箭头函数this；

他们都能指定执行上下文，bind不支持多次bind，仅对第一次调用起效；

他们都是都指向Function.prototype，所有的函数都有此方法；

call 和 bind 可以传入多个参数，apply近传入一个参数，且参数为数组；

call，apply和bind对内置函数有很好的支持，bind属于es5引入，需要polyfill；

善用call，apply，bind与函数搭配，让你的代码更简洁高效，有逼格；

Call

语法

fun.call(thisArg, arg1, arg2, ...)

返回值

使用调用者提供的this值和参数调用该函数的返回值。若该方法没有返回值，则返回undefined。

描述

call()允许为不同的对象分配和调用属于一个对象的函数/方法。

call()提供新的 this 值给当前调用的函数/方法。你可以使用call来实现继承：写一个方法，然后让另外一个新的对象来继承它（而不是在新对象中再写一次这个方法）。

使用场景

使用call方法调用父构造函数

function Product(name, price) { this.name = name; this.price = price; } function Food(name, price) { Product.call(this, name, price); this.category = 'food'; } function Toy(name, price) { Product.call(this, name, price); this.category = 'toy'; } var cheese = new Food('feta', 5); var fun = new Toy('robot', 40);

使用call方法调用匿名函数

var animals = [ { species: 'Lion', name: 'King' }, { species: 'Whale', name: 'Fail' } ]; for (var i = 0; i < animals.length; i++) { (function(i) { this.print = function() { console.log('#' + i + ' ' + this.species + ': ' + this.name); } this.print(); }).call(animals[i], i); }

使用call方法调用函数并且指定上下文的'this'

function greet() { var reply = [this.animal, 'typically sleep between', this.sleepDuration].join(' '); console.log(reply); } var obj = { animal: 'cats', sleepDuration: '12 and 16 hours' }; greet.call(obj); // cats typically sleep between 12 and 16 hours

使用call方法调用函数并且没有确定第一个参数（argument）

apply(与call类似)

该方法的作用和 call() 方法类似，只有一个区别，就是call()方法接受的是若干个参数的列表，而apply()方法接受的是一个包含多个参数的数组。注意，参数是数组。

案例

bind

取数组最小值

var numbers = [5, 6, 2, 3, 7]; var max = Math.max.apply(null, numbers); console.log(max); // expected output: 7 var min = Math.min.apply(null, numbers); console.log(min); // expected output: 2

数组合并

var array = ['a', 'b']; var elements = [0, 1, 2]; array.push.apply(array, elements); console.info(array); // ["a", "b", 0, 1, 2]

取数组最大值

/* 找出数组中最大/小的数字 */ var numbers = [5, 6, 2, 3, 7]; /* 应用(apply) Math.min/Math.max 内置函数完成 */ var max = Math.max.apply(null, numbers); /* 基本等同于 Math.max(numbers[0], ...) 或 Math.max(5, 6, ..) */ var min = Math.min.apply(null, numbers); /* 代码对比： 用简单循环完成 */ max = -Infinity, min = +Infinity; for (var i = 0; i < numbers.length; i++) { if (numbers[i] > max) max = numbers[i]; if (numbers[i] < min) min = numbers[i]; }

描述

bind()方法创建一个新的函数，在调用时设置this关键字为提供的值。并在调用新函数时，将给定参数列表作为原函数的参数序列的前若干项。 注意：bind方法生成是一个新的函数，叫绑定函数，需要手动执行，并且该函数在用bind()指定执行上下文是无效的，如下例子：

var bar = function(){ console.log(this.x); } var foo = { x:3 } var sed = { x:4 } var func = bar.bind(foo).bind(sed); func(); //3 var fiv = { x:5 } var func = bar.bind(foo).bind(sed).bind(fiv); func(); //3

引用

apply bind call

[chuanjing-blog]

this

this

目录

this 是什么?

描述

与 this 相关的一些对象

全局环境下的 this

DOM 事件处理函数的 this

普通函数下的 this

箭头函数中的 this

构造函数下的 this

对象中的方法 this

原型链中的 this

总结

this 是什么？

在使用javascript进行开发的过程中，一直有这么几个神奇的东西，其中一个就是this，this就像是一个女人，让人琢磨不透。 那么this是什么鬼？我们一起来看看MDN的描述。

MDN描述

与其他语言相比，函数的 this 关键字在 JavaScript 中的表现略有不同，此外，在严格模式和非严格模式之间也会有一些差别。在严格模式下，如果 this 没有指定执行环境，运行函数this为undefined。

示例

function f2(){ "use strict"; // 这里是严格模式 return this; } f2() === undefined; // true

在绝大多数情况下，函数的调用方式决定了 this 的值。this 不能在执行期间被赋值，并且在每次函数被调用时 this 的值也可能会不同。ES5 引入了 bind 方法来设置函数的 this 值，而不用考虑函数如何被调用的，ES2015 引入了支持 this 词法解析的箭头函数（它在闭合的执行环境内设置 this 的值）。

MDN并没有给我们明确的定义，this 依旧是魔幻，在不同情况下的 this 均可能不同，让我们接着编下去。

与 this 相关的一些对象

说到 this，那么我们也来看看跟 this 相关的对象，那就是self，global，globalThis，window，下面一些等式可以了解到他们的异同。

Browser:

self === window // true this === window // true global === window // Uncaught ReferenceError: global is not defined at <anonymous>:1:1 globalThis === window // true

Node:

this === {} // true self === {} // self is not defined global // 为全局对象 globalThis // globalThis is not defined

值得注意self 和 globalThis在浏览器中就是window，在node环境下是不存在的；

// 兼容 var globalThis = self = window || global

更多详情

全局环境下的this

在全局环境下，this 都指向 window/global

Browser：

this === window // true function a() { console.log(this) } a() // window

Node：

this === global // true function a() { console.log(this) } a() // global

DOM 事件处理函数的 this

对于元素的监听事件 addEventListener, this 则指向当前元素

对内 html 中内连事件，this 则指向当前元素

<html> <body> <button onclick="console.log(this)"> // 当前dom元素 Show this </button> <button id="btn1"> Show this </button> <script> var btn1 = document.querySelector('#btn1') btn1.addEventListener('click', function(e) { console.log(this) // 当前dom console.log(e) //当前事件对象 }, false) </script> </body> </html>

普通函数下的 this

作为普通函数运行，那么this则只想window或者global

Browser:

var fn = function() { console.log(this) } fn() // window

Node:

const Koa = require("koa") const app = new Koa() const fn = function() { console.log("fn", this) } app.use(ctx => { ctx.body = "" }) app.listen(3000) fn() // global

箭头函数中的 this

箭头函数中的 this 为声明该函数的对象或者函数

箭头函数中的 this 一旦声明，无法更改，但可用call，apply, bind改变this

箭头函数在全局代码中声明, 则 this 为 window

下面通过几个例子看看。

示例 1, 全局声明

var globalObject = this var foo = () => this foo() === globalObject // true foo() === window // true

示例 2，局部绑定，this 指向

// 创建一个含有bar方法的obj对象， // bar返回一个函数， // 这个函数返回this， // 这个返回的函数是以箭头函数创建的， // 所以它的this被永久绑定到了它外层函数的this。 // bar的值可以在调用中设置，这反过来又设置了返回函数的值。 var obj = { bar: function() { var x = (() => this); return x; } }; // 作为obj对象的一个方法来调用bar，把它的this绑定到obj。 // 将返回的函数的引用赋值给fn。 var fn = obj.bar(); // 直接调用fn而不设置this， // 通常(即不使用箭头函数的情况)默认为全局对象 // 若在严格模式则为undefined console.log(fn() === obj); // true // 但是注意，如果你只是引用obj的方法， // 而没有调用它 var fn2 = obj.bar; // 那么调用箭头函数后，this指向window，因为它从 bar 继承了this。 console.log(fn2()() == window); // true

构造函数下的 this

当一个函数用作构造函数时（使用 new 关键字），它的 this 被绑定到正在构造的新对象。

虽然构造器返回的默认值是this所指的那个对象，但它仍可以手动返回其他的对象（如果返回值不是一个对象，则返回this对象）。

/* * 构造函数这样工作: * * function MyConstructor(){ * // 函数实体写在这里 * // 根据需要在this上创建属性，然后赋值给它们，比如： * this.fum = "nom"; * // 等等... * * // 如果函数具有返回对象的return语句， * // 则该对象将是 new 表达式的结果。 * // 否则，表达式的结果是当前绑定到 this 的对象。 * //（即通常看到的常见情况）。 * } */ function C(){ this.a = 37; } var o = new C(); console.log(o.a); // logs 37 function C2(){ this.a = 37; return {a:38}; } o = new C2(); console.log(o.a); // logs 38

对象中的方法 this

如果函数作为对象的一个属性时，并且作为对象的一个属性被调用时，函数中的this指向该对象，箭头函数除外；

var obj = { a: 1, b: 2, fn: function() { console.log('fn', this) }, fn1: () => console.log(this), fn2: function() { console.log('fn2', this.fn1()) } } obj.fn() // obj obj.fn1() // window

原型链中的 this

我们来看一段代码先：

let Fn = function() { this.name = 'tom'; this.age = 18 } Fn.prototype.print = function() { console.log(this) } let fn1 = new Fn() fn1.print() // { name = 'tom', age: 18 } let fn2 = new Fn() fn2.print() // { name = 'tom', age: 18 }

上面代码可以看到f1, f2是Fn new出来的实例，但是他们都输出了一样的值，那么他们的this指向是怎样的呢？改造一下代码比较一下。

let Fn = function() { this.name = 'tom'; this.age = 18 } Fn.prototype.print = function() { console.log(this) return this } Fn.prototype.print1 = () => console.log(this) let fn1 = new Fn() fn1.print() // { name = 'tom', age: 18 } let fn2 = new Fn() fn2.age = 25 fn2.print() // { name = 'tom', age: 25 }

可以看出fn1，fn2的 this是不同的，并且他们各自指向自身实例。

那么问题又来了，如果是箭头函数呢？再来看看此段代码：

[chuanjing-blog]

this

this

this是什么？

！！！this是一个对象，并不是一个环境，也不是执行上下文，也不是作用域。

描述

与其他语言相比，函数的 this 关键字在 JavaScript 中的表现略有不同，此外，在严格模式和非严格模式之间也会有一些差别。

在绝大多数情况下，函数的调用方式决定了this的值。this不能在执行期间被赋值，并且在每次函数被调用时this的值也可能会不同。ES5引入了bind方法来设置函数的this值，而不用考虑函数如何被调用的，ES2015 引入了支持this词法解析的箭头函数（它在闭合的执行环境内设置this的值）。

全局环境

在全局环境下，this都指向window

this === window // true function a() { console.log(this) } a() // window

作为一个DOM事件处理函数

对于元素的监听事件addEventListener, this则指向当前元素

对内html中内连事件，this则指向当前元素

<html> <body> <button onclick="console.log(this)"> // 当前dom元素 Show this </button> <button id="btn1"> Show this </button> <script> var btn1 = document.querySelector('#btn1') btn1.addEventListener('click', function(e) { console.log(this) // 当前dom console.log(e) //当前事件对象 }, false) </script> </body> </html>

箭头函数中的this

箭头函数中的this为声明该函数的对象或者函数

箭头函数中的this一旦声明，无法更改!!!

箭头函数在全局代码中声明, 则this为window

示例1, 全局声明

var globalObject = this var foo = () => this foo() === globalObject //true foo() === window //true

示例2，局部绑定，this指向

// 创建一个含有bar方法的obj对象， // bar返回一个函数， // 这个函数返回this， // 这个返回的函数是以箭头函数创建的， // 所以它的this被永久绑定到了它外层函数的this。 // bar的值可以在调用中设置，这反过来又设置了返回函数的值。 var obj = { bar: function() { var x = (() => this); return x; } }; // 作为obj对象的一个方法来调用bar，把它的this绑定到obj。 // 将返回的函数的引用赋值给fn。 var fn = obj.bar(); // 直接调用fn而不设置this， // 通常(即不使用箭头函数的情况)默认为全局对象 // 若在严格模式则为undefined console.log(fn() === obj); // true // 但是注意，如果你只是引用obj的方法， // 而没有调用它 var fn2 = obj.bar; // 那么调用箭头函数后，this指向window，因为它从 bar 继承了this。 console.log(fn2()() == window); // true

作为构造函数

当一个函数用作构造函数时（使用new关键字），它的this被绑定到正在构造的新对象。

[chuanjing-blog]

README

性能优化

批量操作dom，修改样式，较少重排和重绘

使用iconfont，svg代替图标

图片压缩，图片使用base64位，尽量使用png，webp

图片懒加载

防抖与节流

服务器开启gzip

较少http请求

对于h5，可以使用url拦截公用文件

css，js文件合并拆分

预处理器嵌套层级不宜超过三层

压缩html，css，js

避免重定向

文件懒加载

网络请求

合理合并与拆分css，js文件

压缩html，css，js

使用iconfont，svg代替图标，或简单图片

使用webp和png替代jpg和gif

使用按需加载

避免重定向

Cache-Control 和 ETag，Max-age

url拦截公用请求，h5方面

服务器开启gzip，较少体积

多图片情况下，使用图片懒加载

检查http返回时间

事件方面

批量操作dom，修改样式，较少重排和重绘

防抖与节流

较少dom操作，减少重排和重绘

绑定事件应减少，使用事件代理

html

合理安排css，js在html顺序

合理使用标签

[chuanjing-blog]

webpack

Webpack

webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

工作方式

简单来说，从项目的入口entry.js文件为起点，到output.js为终点，webpack建立起相关的依赖图，我们在此时可以使用amd，cmd，esmodule风格或方式引用编写代码，让代码分割的更加清晰，易于管理，也就是我们所说的模块化，这就是webpack的工作方式。webpack提供了loader加载器，让我们在编写代码中可以识别到样式，图片,.vue文件，js文件等，解决了组件化，工程化的一大问题，另外提供了插件模式，内置插件不多，但是可以自定义插件，社区活跃，第三方插件丰富，让开发更加便利，此时的webpack，不仅仅是一个模块化工具，更是一套复杂应用开发的解决方案。

优点

gulp可以做的webpack可以做，webpack能做的gulp未必可以做。

webpack模块化，使复杂应用简单化。

插件丰富，社区支持强大。

可操作性强，可以深度diy工程项目，大而全。

缺点

webpack 不太容易被新手理解，虽然强大，但是需要一定的学习成本，对于单一框架性开发过于臃肿。

常用loader

babel-loader 加载并解析js文件

url-loader 加载并解析图片，字体相关文件

vue-loader 加载并解析.vue文件

css-loader 加载并解析 css 文件

sass-loader 加载并解析 scss 文件

react-hot-loader 加载并解析 react 文件

loaders 有三种使用模式

配置型，在webpack.config.js中使用

内联型，引用时使用 import Styles from 'style-loader!css-loader?modules!./styles.css';

通过命令cli启动webpack --module-bind jade-loader --module-bind 'css=style-loader!css-loader'

常用的插件

DllPlugin 抽离公用方法，样式

UglifyJsPlugin 丑化js

OptimizeCSSPlugin 优化压缩css

CommonsChunkPlugin 多次使用js，css方法抽离

CopyWebpackPlugin 文件移动处理

CompressionWebpackPlugin 提供带 Content-Encoding 编码的压缩���的资源

DefinePlugin 编译时全局常量

HtmlWebpackPlugin html生成器

HotModuleReplacementPlugin 热更新

OccurenceOrderPlugin 模块优先级排序

ExtractTextPlugin 提取css为class

打包性能优化

使用yarn，yarn有缓存

loaders 排除 node_modules模块，减少查询时间

删除无用依赖，无用依赖会占用webpack构建时间

指定 resolve.modules，让 Webpack 去除 node_module 寻找第三方库

指定 module.noParse，排除非模块化文件解析

指定 resolve.extensions，让 Webpack 寻找可解析文件

使用 externals 外链第三方库，减轻编译压力

使用 DllPlugin 预先打包公用dll库，在引入mainfest文件到webpack中

使用 OccurenceOrderPlugin 排序模块优先级，使用频繁的模块优先级会提高，使得检索速度加快

打包功用方法，公用模块 CommonsChunkPlugin

使用 ParallelUglifyPlugin 替代 UglifyJsPlugin，开启多进程编译

使用 Happypack 开启多线程处理loaders，可以处理 babel 和 样式

使用 resolve.alias 指定相对路径，减少查询文件时间

开发环境关闭 source-map

使用 babel-plugin-import 来按需加载模块

监听文件变化排除 node_modules

内部文件使用按需加载，require.ensure