深入理解webpack打包机制(8)

发布时间：2020-12-24 09:09 所属栏目：34 来源：网络整理

导读：我们先写一个例子来说明： } ; import classC ; span style="color: #008000"//span style="color: #008000" src/es6/js/utilA.js export span style="color: #0000ff"const utilA = span style="color: #800000"'s

我们先写一个例子来说明：

} ; import classC ; // src/es6/js/utilA.js
export const utilA = 'util A';
export function funcA() {
console.log('func A');
}

// src/es6/js/utilB.js
export default function() {
console.log('func B');
}
if(false) { // 被清除
console.log('never use');
}
while(true) {}
console.log('never use');

// src/es6/js/utilC.js
const classC = function() {} // 类方法不会被清除
classC.prototype.saySomething = function() {
console.log('class C');
}
export default classC;

打包的配置也很简单：

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 中不能将所有所有的模块直接放在同一个作用域下，有以下几个原因：

按需加载的模块
使用 commonjs 规范的模块
被多 entry 共享的模块

在 webpack3 中，这些情况生成的模块不会进行作用域提升，下面我就举个例子来说明：

export utilA = // src/hoist/utilB.js
export const utilB = 'util B';
export function funcB() {
console.log('func B');
}

// src/hoist/utilC.js
export const utilC = 'util C';

// src/hoist/pageA.js
import { utilA,funcA } from './utilA';
console.log(utilA);
funcA();

// src/hoist/pageB.js
import { utilA } from './utilA';
import { utilB,funcB } from './utilB';

funcB();
import('./utilC').then(function(utilC) {
console.log(utilC);
})

这个例子比较典型，utilA 被 pageA 和 pageB 所共享，utilB 被 pageB 单独加载，utilC 被 pageB 异步加载。

想要 webpack3 生效，则需要在 plugins 中添加 ModuleConcatenationPlugin。

webpack 配置如下：

webpack = require( path = require(=

运行进行编译，简单看下生成的 pageB 代码：

webpackJsonp([ utilA = __webpack_require__( utilB = ().then(__webpack_require__.bind(,]);

（编辑：ASP站长网）