深入理解webpack打包机制
我们先写一个例子来说明: } ; import classC ; <span style="color: #008000">//<span style="color: #008000"> src/es6/js/utilA.jsexport <span style="color: #0000ff">const utilA = <span style="color: #800000">'<span style="color: #800000">util A<span style="color: #800000">'<span style="color: #000000">; export function funcA() { console.log(<span style="color: #800000">'<span style="color: #800000">func A<span style="color: #800000">'<span style="color: #000000">); } <span style="color: #008000">//<span style="color: #008000"> src/es6/js/utilB.js <span style="color: #008000">//<span style="color: #008000"> src/es6/js/utilC.js 打包的配置也很简单: webpack = require( path = require(=对压缩的文件进行分析: webpackJsonp([,{ value: ! n = e(),e(= n ==]);引入但是没用的变量,函数都会清除,未执行的代码也会被清除。但是类方法是不会被清除的。因为 webpack 不会区分不了是定义在 classC 的 prototype 还是其它 Array 的 prototype 的,比如 classC 写成下面这样: classC = a = + (a === == = classC;webpack 无法保证 prototype 挂载的对象是 classC,这种代码,静态分析是分析不了的,就算能静态分析代码,想要正确完全的分析也比较困难。所以 webpack 干脆不处理类方法,不对类方法进行 tree shaking 更多的 tree shaking 的副作用可以查阅: 四、webpack3如何做到scope hoisting? scope hoisting,顾名思义就是将模块的作用域提升,在 webpack 中不能将所有所有的模块直接放在同一个作用域下,有以下几个原因:
在 webpack3 中,这些情况生成的模块不会进行作用域提升,下面我就举个例子来说明: export utilA = <span style="color: #008000">//<span style="color: #008000"> src/hoist/utilB.jsexport <span style="color: #0000ff">const utilB = <span style="color: #800000">'<span style="color: #800000">util B<span style="color: #800000">'<span style="color: #000000">; export function funcB() { console.log(<span style="color: #800000">'<span style="color: #800000">func B<span style="color: #800000">'<span style="color: #000000">); } <span style="color: #008000">//<span style="color: #008000"> src/hoist/utilC.js <span style="color: #008000">//<span style="color: #008000"> src/hoist/pageA.js <span style="color: #008000">//<span style="color: #008000"> src/hoist/pageB.js (编辑:衡阳站长网) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |