译者按: 用Tree Shaking技术来减少JavaScript的Payload大小 原文: Reduce JavaScript Payloads with Tree Shaking 译者: Fundebug 为了保证可读性,本文采用意译而非直译.另外,本文版权归原作者所有,翻译仅用于学习. 小编推荐:Fundebug专注于JavaScript.微信小程序.微信小游戏,Node.js和Java线上bug实时监控.真的是一个很好用的bug监控服务,众多大佬公司都在使用. 如今一个网页应用可以体积

目前主流的模块规范 UMD CommonJs es6 module umd 模块(通用模块) (function (global, factory) { typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : typeof define === 'function' && define.amd ? define(factory) : (global

之前介绍过webpack3的新特性,里面提到webpack2支持了ES6的import和export,不需要将ES6的模块先转成CommonJS模块,然后再进行打包处理.正基于此,webpack2引入了tree-shaking技术,能够在模块的层面上做到打包后的代码只包含被引用并被执行的模块,而不被引用或不被执行的模块被删除掉,以起到减包的效果. webpack的tree-shaking案例 下面结合实际代码来解释webpack2是如何实现tree-shaking的,示例代码可到github进行

commonjs模块和es6模块最主要的区别:commonjs模块是拷贝,es6模块是引用,但理解这些,先得理解对象复制的问题,在回过头来理解这两模块的区别. 一.基本数据类型的模块 ./a1.js es6模块 export var a1 = 1; setTimeout(() => a1 = 2, 500); ./a2.js commojs模块 var a2 = 2; module.exports = a2; setTimeout(() => a2 = 3 ,500); ./index.js

Tree-Shaking性能优化实践 - 原理篇   一. 什么是Tree-shaking 先来看一下Tree-shaking原始的本意 上图形象的解释了Tree-shaking 的本意,本文所说的前端中的tree-shaking可以理解为通过工具"摇"我们的JS文件,将其中用不到的代码"摇"掉,是一个性能优化的范畴.具体来说,在 webpack 项目中,有一个入口文件,相当于一棵树的主干,入口文件有很多依赖的模块,相当于树枝.实际情况中,虽然依赖了某个模块,但其实

Tree-shaking 字面意思就是 摇晃树, 其实就是去除那些引用的但却没有使用的代码. Tree-shaking 概念最早由 Rollup.js 提出,后来在 webpack2 中被引入进来,但是这个这一特性能够被支持得益于 ES6 modules 的静态特性.ES6 的模块声明相比于传统 CommonJS 的同步 require 有着本质区别.这种 modules 设计保证了依赖关系是提前确定的,使得静态分析成为了可能,与运行时无关. 并且 webpack 中并没有直接对 tree sh

1.ES6 Module javascript在ES2015(ES6)中出现了语言层面的模块(module). ES6的模块既可以用于浏览器端,也可以用于服务器端(nodeJS). ES6模块是静态化的模块加载,可以实现静态优化,在编译时就可以分析确认模块的依赖和输入输出变量. 而AMD和CommonJS是在运行时才能确认这些东西. 2. AMD 在此之前,浏览器端使用的模块加载方案主要是AMD,基于require.js; AMD和CMD其实都是浏览器端的异步模块加载规范: AMD是Requir

一.一个简单的node程序 1.新建一个txt文件 2.修改后缀 修改之后会弹出这个,点击"是" 3.运行test.js 源文件 使用node.js运行之后的. 如果该路径下没有该文件,会报错 4.运行test2.js 二.模块简单使用 为了编写可维护的代码,我们把很多函数分组,分别放到不同的文件里,这样,每个文件包含的代码就相对较少,很多编程语言都采用这种组织代码的方式.在Node环境中,一个.js文件就称之为一个模块(module). 模块化的开发的好处:提高代码的可维护性,避免修

CommonJS规范 1. 概述 为什么要用commonjs 模块化的目的: 减少循环依赖 减少耦合,提高了模块的复用率 有利于多人开发,提高开发的效率. 规避命名的冲突.全局变量的污染.有利于代码的维护.异步加载模块对页面性能方面有提升 但是多人开发也会带来一些问题. 依赖问题: 不同的模块之间可能存在依赖问题,如果需要手动指定其加载次序,不仅浪费人力物力,也不利于修改. 全局污染问题: 模块加载的顺序,按照其在代码中出现的顺序.加载次序不同的模块,如果重复定义了相同的变量,一定会引发无法预计

先说说CommonJS CommonJS - 大家是不是觉得JavaScript仅仅是一个客户端的编译语言,其实JavaScript设计之初不仅仅是针对客户端设计的语言.后来只是由于Web的迅速流行,加之Netscape和微软之间之争过早的将JavaScipt标准化.要了解详细的JS历史请查看:http://zh.wikipedia.org/zh-cn/JavaScript.过早的标准化JS就导致JS的诸多缺陷和标准类库的缺乏,即使这样也不影响JS成为一门优秀的编程语言(比如现在非常流行的Nod

最近在学习nodejs的KOA框架,在查资料的时候遇见了点问题,顺着信息一步一步找下去,让我了解了一下一直以来不是很明白的什么时候用AMD规范,什么时候用CommonJS规范问题. CommonJS一般用于服务器端,因为CommonJS规范的加载是同步的,也就是只有加载完成,才能执行后面的操作,由于服务器的代码文件,一般存在于本地硬盘,所以加载起来比较快,在这个方面,使用CommonJS比较合适. AMD一般用于用户(浏览器)端,AMD规范的加载是异步的,允许加载哪个先加载完就先执行哪个内容,在

有了服务器端模块以后,很自然地,大家就想要客户端模块.而且最好两者能够兼容,一个模块不用修改,在服务器和浏览器都可以运行. 但是,由于一个重大的局限,使得CommonJS规范不适用于浏览器环境.还是上一节的代码,如果在浏览器中运行,会有一个很大的问题,你能看出来吗? var math = require('math'); math.add(2, 3); 第二行math.add(2, 3),在第一行require('math')之后运行,因此必须等math.js加载完成.也就是说,如果加载时间很长

最近写react需要使用nodejs作为开发环境,需要通过npm安装一些第三方的依赖库,因此慢慢感觉到nodejs基础薄弱对我带来了一些不安全感,尤其是javascript模块这一块听到了很多概念,比如:AMD,CMD,异步加载… … 我不由的好奇,前端还能按需异步加载js,到底是什么闻所未闻的高科技?AMD, CMD听起来像是主板型号,到底是什么鬼?所以,不如一探究竟吧! 模块的黑历史 这里推荐先阅读2个博客: 介绍了一下javascript模块化的发展历史,但不会讲每个规范的出现原因或者工作

0.导言 JavaScript的生态系统一直在稳步增长,当各种组件混合使用时,就可能会发现不是所有的组件都能“和平共处”,为了解决这些问题,各种模块规范就出来了. 1.AMD(Asynchromous Module Definition - 异步模块定义) AMD是RequireJS在推广过程中对模块定义的规范化产出,AMD是异步加载模块,推崇依赖前置. define('module1', ['jquery'], ($) => { //do something... }); 代码中依赖被前置,当

如果你听过js模块化这个东西,那么你就应该听过或CommonJS或AMD甚至是CMD这些规范咯,我也听过,但之前也真的是听听而已. 现在就看看吧,这些规范到底是啥东西,干嘛的. 一.CommonJS CommonJS就是为JS的表现来制定规范,因为js没有模块的功能所以CommonJS应运而生,它希望js可以在任何地方运行,不只是浏览器中. CommonJS能有一定的影响力,我觉得绝对离不开Node的人气,不过喔,Node,CommonJS,浏览器甚至是W3C之间有什么关系呢,我找到了个贴切的图

学得比较晕,再次看commonjs,amd, cmd时好像还是没完全弄清楚,今天再整理一下: commonjs是用在服务器端的,同步的,如nodejs amd, cmd是用在浏览器端的,异步的,如requirejs和seajs 其中,amd先提出,cmd是根据commonjs和amd基础上提出的. 为什么晕呢?是因为没用,或用得太少.光看看文章是不行的. CommonJS CommonJs 是服务器端模块的规范,Node.js采用了这个规范. 根据CommonJS规范,一个单独的文件就是一个模块

本文来自四火哥的翻译 CommonJS是一组javascript编程规范,而promise是其中之一. 简而言之,promises是一种令代码的异步行为变得更加优雅的软件抽象.在基本的定义中,代码可能一直是这样写的 getTweetsFor("domenic", function (err, results) { // the rest of your code goes here. }); 现在你的方法有一个返回值,叫做promise,它代表操作的最终结果. var promiseF

commonjs http://www.commonjs.org/ CommonJS JavaScript is a powerful object oriented language with some of the fastest dynamic language interpreters around. The official JavaScript specification defines APIs for some objects that are useful for buildi

浅析JS中的模块规范(CommonJS,AMD,CMD)   如果你听过js模块化这个东西,那么你就应该听过或CommonJS或AMD甚至是CMD这些规范咯,我也听过,但之前也真的是听听而已.    现在就看看吧,这些规范到底是啥东西,干嘛的. 一.CommonJS  CommonJS就是为JS的表现来制定规范,因为js没有模块的功能所以CommonJS应运而生,它希望js可以在任何地方运行,不只是浏览器中.  CommonJS能有一定的影响力,我觉得绝对离不开Node的人气,不过喔,Node,

CommonJS的模块加载机制 CommonJS模块的加载机制是,输入的是被输出的值的拷贝.也就是说,一旦输出一个值,模块内部的变化就影响不到这个值. 例如: // lib.js var counter = 3; function incCounter() { counter++; } module.exports = { counter: counter, incCounter: incCounter, }; // main.js var counter = require('./lib').

作者:giscafer链接:https://www.zhihu.com/question/20576942/answer/58094030来源:知乎著作权归作者所有,转载请联系作者获得授权. CMD是国内玉伯大神在开发SeaJS的时候提出来的,属于CommonJS的一种规范,此外还有AMD,其对于的框架是RequireJS1.二者都是异步模块定义(Asynchronuous Module Definition)的一个实现:2.CMD和AMD都是CommonJS的一种规范的实现定义,Require