webpack5 配置 13(性能优化)Tree shaking Http压缩 html压缩， runtime压缩， 封装library

Tree shaking

树摇晃，比如一颗树上的果子已经成熟了，那么他就不需要在树上了，摇晃着下来，树也会变得简洁。代码的话，比如一些代码如函数，定义后但是没有用到，那么这个代码就不会被打包。
Tree shaking,计算机表示消除dead-code。用于消除未调用的代码，因为纯函数无副作用，所以可以放心消除，这也是为什么要尽量使用纯函数进行编程。
Js中的Tree shaking
主要是源自rollup工具。
这是因为Tree shaking是依赖于ES MODULE的，因为ES module是静态分析的，在编译时即分析。而tree shaking，要根据模块的依赖关系判断哪些代码是无效的。

webpack5开始也支持了一些在Commonjs的tree shaking。

webpack实现Tree shaking有两种不同的方式

1 usedExports: 通过标记某些函数是否被使用，之后通过我们上节说的Terser来进行优化
2 sideEffects: 跳过整个模块/文件，直接查看该文件是否有副作用
两种独立的方案，这两种的优化完全不一样

usedExports + Terser（procutions默认就是开启这两个的）

为了可以看到正常的usedExports带来的效果，我们设置为development模式

可以看到，没用的num2函数还是会被继续封装的。
那么怎么使用tree shaking呢，很简单

因为num2没有用到，所以不导出了。
还写了个注释,这个注释表示num2没用到，这个注释能被Terser解析，比如这里写着num2无效，若设置了terser后，num2这个定义的代码也会删掉。

小结 所以这个usedExports的目的是标注出哪些函数是没被使用的，然后配合Terser将没用的函数在打包的时候删掉。

sideEffects

导出后没有使用，只是做了一个import，那么这个import是没意义的，所以这个import和import那个文件，要统统去掉。这就要用到sideEffects。（副作用）
sideEffects用于告知wbepack complie哪些模块具有副作用。副作用的意思是这段代码有执行一些特殊的任务，不能仅仅通过export判断有无意义。
最简单的使用：

在package.json文件里面，配置sideEffects为false。告诉webpack所有的模块均没有副作用，所以可以放心删除像刚才import那种的代码。
但是有一些模式是有副作用的，我们不可以删除。
可以加一个数组，告诉webpack哪些模块有副作用，不删掉。
这样打包的时候，format.js模块不会被删掉。
但是这样操作，其他的import导入的文件，只要不在sideEffects指定的文件里，都会被认为没有副作用且被删掉，如css文件。

所以的css文件，我们都是希望打包的，所以可以指定所有的css都是有副作用的。
那如果我们设为false值呢，就认为所有的js文件都没有副作用
就可以利用我们的weback配置了

在匹配到的css文件下加上sideEffects属性，告诉webpack所有的css文件都有副作用。

小结 第二项设置是在package.json的sideEffects属性，告诉webpack哪些值没有副作用，可以设置false,true,[]。我们通常希望在设置false的时候，css文件不想被删掉，就可以在webpack的module.rolues里面找到匹配css的Loader，并在那里添加一行sideEffects:true的配置，告诉webpack我们所有的css文件都是有‘副作用’的。

webpack中对tree shaking的配置

1 在optimization中配置usedExports为true，帮助Terser做一个优化，（production下默认配置了）
2 在package.json中配置sideEffects为false，然后css加上配置sideEffects:true（react配置了），直接对模块进行优化。但要保证所有的模块都是没有副作用的。

Css的tree shaking

上面的tree shaking是对js代码做了优化，但是我们还想对css做优化，比如我们设置了一个.title{}，但这个类title并不存在，所以得删掉。
我们得利用一些插件，早期是用purifyCss,现在是PurgeCss。
安装对应的webpack插件
cnpm install purgecss-webpack-plugin -D
这个主要是在porductions模式下是用

插件嘛，自然是在plugin里面new,这里有两个常用的属性，一个是paths，表示匹配到的要tree shaking的文件，官方这里推荐我们使用glob这个库，因为这个路劲不能写死，而webpack已经帮我们装好了，所以我们直接引入就行，匹配到src下的所有文件，/**/*，然后nodir:true，表示当前匹配到的文件下面都是文件，不是文件夹。这样他就会对我们的css代码进行tree shaking，而第二个属性，safelist，顾名思义，就是配置哪些样式是安全的，不需要删掉，如图我们写上Body是安全的，不需要删掉。而那些没用的就会自动删除。
打包后

只是body。
但是

我们加上一个div，使其类为a，那么a的样式就是有用的了
可以看到有用的css样式不会被删掉。

小结 css Tree shaking，主要是使用一个插件purgecss-webpack-plugin，在生产模式下配置，插件，匹配到所有的文件，然后这个插件会帮助我们检查哪些css代码是没用的，哪些是有用的，当然我们也可以自己在第二个属性设置哪些样式是安全的，不想被删掉。打包后就会正常tree shaking了。

Tree shaking总结，js的tree shaking主要是通过两种，一个是usedExports来个没用的函数加上注释，配合Terser来进行优化，一个是sideEffects来配置哪些模块是没有副作用的，没有副作用的，且由improt './xx’引入的代码都会在打包的时候被删掉，当然这样的css也会被删掉，所有要在匹配到css的module.rules里配置sideEffects:true。告诉wbepack，css文件的代码是有’副作用’的，不要被删掉。而css tree shakgin主要是哦通过purgecss-webpack-plugin来配置，删掉某些没用的css样式代码。

认识Http压缩

目前的压缩格式有很多，如deflate，gzip，br(一种新开源压缩算法，专为http内容的编码而设计)
webpack中相当于是实现了http压缩的第一步操作，我们可以使用compressionPlugin，
cnpm install compression-webpack-plugin -D
这个主要也是在生产模式下配置的
最简单的用法


可以看到已经正常压缩了。
这个插件可以设置几个属性，
一般用的比较多的是test属性。

HTML文件压缩

html在production下，默认就是会压缩的。我们也可以配置它的属性让它通过我们想要的格式压缩。
我们之前是配置了一些的，比如html-webpack-plugin插件来指定我们的html模板

这个其实是有很多属性的。

new HtmlWebpackPlugin({
      template: "./index.html",
      inject: true, //注入，就是会将打包的css，js注入到html里。可以设： false,(不注入), head body默认是true，
      cache: true, //要不要用缓存，比如第二次打包的文件跟第一次的文件一样的话就会使用缓存
      minify: isProduction ? {
        removeComments: true, //要不要移除模板的注释
        removeRedundantAttributes: true, // 是否移除多余的属性, 如 <input type='text' />默认就是text了，这个type=text就是没意义的
        removeEmptyAttributes: true, //是否移除一些空属性， 如id=''，这种属性就会被删掉
        collapseWhitespace: true, //折叠空格，把空格换行全都删掉。
        removeStyleLinkTypeAttributes: true, //删除links的type属性
        minifyCSS: true, //对内联的style的css进行压缩
        minifyJs: {
          mangle: {
            toplevel: true, //对顶层的代码也做丑化
          }
        }, //true对内联的script的js代码进行压缩， 也可设置对象 {}
      } : false, //为false,不压缩Html代码。一般通过判断是否是开发模式来做配置，开发模式下不压缩

    }),

通过上面的配置一般就可以正常压缩html文件了，而且有的值使用默认属性就行了。

认识InlineChunkHtmlPlugin插件

我们之前配置的runtime,

他会对模块化的代码进行打包，但是这个包的大小是比较小的，如果放到服务器上，就要多发一次请求，那么我们可以使用这个插件去注入到index.html中，虽然这样Hmtl文件会大一点，但能少发一次http请求。
cnpm install react-dev-utils -D

在生产模式下new一个，传入两个属性，一个是htmlwebpackplugin，因为这个插件是对index.html做处理，而打包后的Index.html是通过htmlwebpackplugin处理的。
打包后

可以看到已经内敛了，而且引入runitme的文件，虽然打包后生成了，但是Index.html已经不会引入了，而是直接内联了。

封装Library

比如现在我们开发了自己的一个库。
npm login然后发布。
然后npm install xxx名就好了。具体可以百度
但是如果有个人想使用我们这个库，但是在浏览器使用，所以我们这个代码不可以用的，因为我们是在webpack模块化使用的，所以我们要打包，让它能在任何环境下运行。
我们先基于webpack来打包，安装webpack webpack-cli

然后基本配置一下。

我们先设置为development，可以看到这些就算发布了使用者也很难看。
所以可以在打包的时候配置
打包后

多了这个函数。可以看到多了几层判断，判断当前的环境。

这样的话我们接可以使用window.huautils.num去拿到我们真实发布的代码。


可以正常使用了。