webpack tree shaking--基础

tree shaking 是一个术语，通常用于描述移除 JavaScript 上下文中的未引用代码(dead-code)。它依赖于 ES2015 模块系统中的静态结构特性，例如 import 和 export

通俗一点解释就是： 当我引入这个模块的时候  我不引用这个模块的所有代码 我只引入它需要的代码

好处：主要的决定因素是应用程序中死代码的数量。如果你没有多少死代码，那么你就看不到 tree-shaking 的多少好处。

什么是死代码

很简单：就是 Webpack 没看到你使用的代码。Webpack 跟踪整个应用程序的 import/export 语句，因此，如果它看到导入的东西最终没有被使用，它会认为那是“死代码”，并会对其进行 tree-shaking 。

1.代码不会被执行

if(false) {
   do something
}

这样的代码可以称之为dead code

 

2.代码只写不读

a.js中
export function readCookie(){
    do something
}
export function createCookie(){
    do something
}

b.js中
import {readCookie} from './a.js';
readCookie()

因为b中并没有import createCookie，故而在webpack打包的时候会将其标记为 unused harmony

最后在uglify阶段被删除掉。

 

只支持es  module  模块引用   也就是只支持 import的引用

Const  add = require(‘xxx’)  这种是不支持的

Import 的 引入方式  底层是 静态的引入方式

而 require的引入方式 是动态的引入方式

Tree shaking  只支持静态的引入方式  所以只支持module的引入方式

 

Development 环境配置  配置 optimization  

 

Package.json  配置 sideEffects   如果有不需要使用的tree shaking的模块 以数组的形式进行写入   例如  @babel/polly-fill  或者css文件    

SideEffects:[‘@babel/polly-fill ’,’*.css’] 等