分析webpack如何优雅地使用摇树(摇树优化)

1.什么是摇树

摇树是webpack 2到来带来的最好的新功能之一。摇树起源于rollup.js现在，webpack 2也有类似的做法。

webpack中摇树的出现必须归功于es6规范的模块。为什么这么说？现在前端模块的规格很多，比较热门的模块比如commonJS、AMD、es6。我将简要谈谈commonJS和es6模块之间的区别。

CommonJS模块

CommonJS的模块规范在Node中被继承。一般来说，它的特点如下：

1.动态加载模块

这可能是commonJS和es6最大的区别。commonJS模块的动态加载可以轻松实现惰性加载，优化用户体验。

2.加载整个模块

在commonJS模块中，整个模块都是导出的。

3.每个模块都是一个对象

CommonJS模块都被视为一个对象。

4.价值副本

commonJS的模块输出类似于函数的值传递，是值的副本

Es6模块

1.静态解析

即输出模块在解析阶段确定，所以es6模块的导入一般写在导入文件的开头。

2.该模块不是对象

在es6中，每个模块都不是一个对象

3.整个模块未加载

在es6模块中，经常可以看到一个模块中有多个导出

4.模块参考

在es6模块中，导出的不是模块的值副本，而是该模块的引用

结合es6模块和commonJS模块的区别，我们知道es6的特点是静态解析，而commonJS模块的特点是动态解析。因此，可以通过静态解析es6模块来实现摇树。在webpack中，摇树指的是按需加载，也就是没有被引用的模块不会被打包，这减少了我们的包的大小，缩短了应用程序的加载时间，给用户带来了更好的体验。

2.如何使用摇树

话虽如此，如何使用摇树？在webpack的默认es6规范中编写的模块可以使用树摇动。这是什么意思？我们来看一个例子。

首先，我展示我的演示目录如下：

distindex.htmlnode_modules.src scripts assetswebpack.config.jspackage.json

Dist用于存储打包的代码

Src用于存储源文件

src中的Scripts目录用于存储js脚本文件，assets用于存储静态资源文件

接下来，我们将开始摇树之旅

NPM install-save-dev web pack web pack-dev-serverwebpack . config . jsconst web pack=require(' web pack ')const path=require(' path ')module . exports={ entry : }。/src/scripts/main.js '，output : { path : path . resolve(_ dirname，' dist/')，filename:'main.bundle.js' }，plugins:[ new webpack。hotmoduleereplacementplugin()]，devServer:{ port:4200，contentbase : path . resolve(_ dirname，' dist/')，Historiyapifallback : true，hot : true}}后跟main.js，直接引入sayHello

从导入{ sayHello }。/greeter . ts '；

sayHello()；

对应main.js的依赖关系是greeter.js

导出函数say hello () {alert ('hello')}导出函数say world(){ alert(' world ')} dist目录中有一个index.html，用于介绍打包的包

！doctype html lang=' en ' head meta charset=' utf-8 ' title document/title/head body script type=' text/JAVAScript ' src=' http :/main . bundle . js '/script/body/html以上是整个演示的代码。让我们尝试直接在webpack中打包下一个东西

打包后去掉冗长的代码，只看块传递参数的部分：

[/* 0 *//***/(函数(模块，__webpack_exports__，_ _ web pack _ require _ _){“使用严格”；对象。define property(_ _ web pack _ exports _ _，“__esModule”，{ value : true })；/* harmony IMPORT */var _ _ WEBSPACK _ IMPORTED _ MODULE _ 0 _ _ person _ _=_ _ WEBSPACK _ require _ _(1)；对象(_ _ WEBSPACK _ IMPORTED _ MODULE _ 0 _ _ person _ _[' a '/* SayHello */])()；/***/}),/* 1 */* * */(函数(模块，__webpack_exports__，__webpack_require__) { '使用“严格”；/*和谐导出(绑定)*/__webpack_require__ .d(__webpack_exports__，' a '，function(){ return SayHello；});/*未使用的和声导出sayWorld */函数sayHello(){ alert(' hello ')；}函数sayWORld(){ alert(' world ')；}/***/})/******/]

我们关注这一行

/*和谐导出(绑定)*/__webpack_require__ .d(__webpack_exports__，' a '，function(){ return SayHello；});实际上只返回了一个说你好。

因此我们现在只需要压缩一下整个射流研究…代码，就能把没引用的sayWorld剔除。

键入以下命令进行压缩

网络包-优化-最小化

由于压缩后的代码只有一行了，我们移步尾部：

函数(e，n，r){ '使用“严格”；function t(){ alert(' hello ')} r . d(n，' a '，function(){ return t })}])；可以看到sayWorld函数已经被成功剔除。

我们启动网络包-开发-服务器

网络包-开发-服务器

在浏览器中输入

http://localhost:4200

每次都需要在命令行里输入参数，岂不是很麻烦，还有没有其他更好的办法呢？

(1)我们可以把这串命令放入package.json的剧本字段，然后通过国家预防机制启动来自动执行

(2)其实优化最小化的底层实现是一个插件UglifyJsPlugin，因此，我们可以直接在webpack.config.js里配置它

在webpack.config.js里配置插件

const path=require(' path ')；const web pack=require(' web pack ')；module.exports={ entry: ' ./src/scripts/main.js '，输出： { filename : ' main。捆绑。js '，路径：路径。join(_ dirname，' dist') }，plugins :[新web pack。优化。uglifyjsplugin()，/-压缩射流研究…新网络包.hotmoduleereplacementplugin()]，devServer:{ port:4200，historyApiFallback:true，hot:true，contentbase : path。join(_ dirname，' dist/') }}然后我们webpack打包

即看到同样的效果

函数(e，n，r){ '使用“严格”；function t(){ alert(' hello ')} r . d(n，' a '，function(){ return t })}])；在摇树触发打包后，仅仅是撇开了模块的引用，但还是要结合压缩工具来进行，这才是完整的一次摇树

那如果是以打字打的文件该怎么使用摇树呢？

3.如何在以打字打的文件里使用摇树

要在webpack里使用ts，首先我们必须安装热压缩热应力龟裂

国家预防机制安装-保存-开发类型脚本

之后我们需要解析分时（同分时)文件的装货设备

国家预防机制安装-保存-开发ts-加载程序

然后在webpack.config.js进行配置

const web pack=require(' web pack ')const path=require(' path ')模块。导出={ entry : ' ./src/scripts/main.ts '，输出： { path : path。解析(_ dirname，' dist/')，文件名：'main.bundle.js' }，模块： {规则s 3360 [{ test :/\ .ts$/，use:['ts-loader'] } ] }，plugins :[new webpack。优化。uglifyjsplugin()，新的web包.hotmoduleereplacementplugin()]，devServer:{ port:4200，contentbase :路径。解析(_ dirname，' dist/')，historyApiFallback:true，hot:true }}献上我的两份文件main.ts，greeter.ts(这两份文件除了后缀名基本没有改动)

main.ts

从导入{说你好} ./迎宾。ts '；sayHello()；迎宾员

export var sayHello=function(){ alert(' hello ')} export var sayWorld=function(){ alert(' world ')}之后我们需要做的是，创建一个tsconfig.json的配置文件供热压缩热应力龟裂解析，这时，坑来了。

下面是我的tsconfig.json文件

{“编译选项”: {“目标”:“es5”、“源映射”:“真”}、“排除”:[./node_modules' ]}好像没有什么不对

接着我们webpack

看下打包压缩后的代码的最后一部分：

使用“严格”；Object.defineProperty(n，' __esModule '，{value:0})，n . SayHello=function(){ alert(' hello ')}，n . SayWorld=function(){ alert(' World ')} })；SayWorld仍然存在！这是怎么回事？为什么摇树优化没有触发？

这是因为tsc的编译代码是es5，也正因为如此，tsc默认使用commonJS规范加载模块，所以不会触发摇树，那我们该怎么办呢？

修改tsconfig.json，将目标改为es6！

{ '编译器选项' : { '目标' :' es6 '，' sourcemap' : true '，' exclude' : ['。/node _ modules']}再次打包

看看打包的包裹

函数(e，n，r){ '使用strict '；r.d(n，' a '，function(){ return t })；var t=function({ alert(' hello ')} })；它真的引发了树木摇动

打开web pack-开发-服务器

web pack-开发-服务器

您可以看到hello已成功打印

以上是我对webpack摇树的总结，希望对大家的学习有所帮助