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'