commonjs vs es6 module

commonjs

exports.bar = 2
module.exports = {foo: 3}
exports.foo = 4

require('./xxx')

/**
* 注意1. module.exports 初始值为 {} 
*     2. exports 的改变影响不了 module.exports 
*     3. require 返回的是 module.exports 而不是 exports
*/

ES6 module

export const a = 2
export function b() {...}
const c = 12
export default c

export、import 可以有多个， export default 仅有一个。 使用 export 导出时，导入需加 {}

commonjs 与 ES6 module 的区别

/**
 * commonjs vs es6 module 
 * commonjs         es6 module
 * 输出的是值拷贝     输出的是值引用
 * 运行时加载        编译时输出接口
 * 单个值输出        可导出多个值
 * 动态语法          静态语法
 * this指向当前模块   this指向undefined
 */

Tree shaking 将项目中没用的代码删除掉，减少打包后 js 文件的大小。在 webpack 为 production 时默认开启。通过设置 optimization: { usedExports: true } 来标记代码是否被使用，在压缩时未使用的代码将被删除。

通过 require 这种方式引入不会被删除？因为 webpack 的 treeshaking 是在代码运行前完成的，而 require 是在代码运行时才会执行。

import _ from 'lodash'
import { get } from 'lodash'

如上，会将整个 lodash 打包，因为 lodash 是通过 module.exports 导出的。

解决方式是采用按需加载 import get from 'lodash.get' 的方式引入。

----------------------------------------

tree shaking 只处理函数和顶层的 import、export 变量，无法将无用的类方法删除掉。尽量使用 ES6 的 export

export 对应 import {xxx} from 'xxx'