23_webpack_TreeShaking

什么是TreeShaking

TreeShaking，是一个术语，表示消除死代码(dead_code)

JS的Tree Shaking 对JS进行TreeShaking是源自打包工具rollup
这是因为TreeShaking依赖于ESModule的静态语法分析

webpack2正式内置支持了ES2015模块，和检测未使用模块的能力

在webpack4正式扩展了这个能力，并且通过package.json的sideEffects属性作为标记，告知webpack在编译时，哪些文件可以安全的删除掉

webpack5中，也提供了对部分CommonJS的tree shaking支持

 

webpack实现Tree Shaking

实际上webpack实现Tree Shaking采用了两种不同的方案

　　usedExports：通过标记某些函数是否被使用，之后通过Terser来进行优化

　　sideEffects：跳过整个模块/文件，直接查看该文件是否有副作用

 

usedExports

将mode设置为development模式

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

　　因为在production模式下，webpack默认的一些优化会带来很大的影响

设置usedExports为true和false对比打包后的代码

　　在usedExports设置为true时，会有一段注释：unused harmony export mul；

usedExports：标注(魔法注释)出来哪些函数是没有被使用到的，结合terser一起使用如：

(
        __unused_webpack_module,
        __webpack_exports__,
        __webpack_require__
      ) => {
        /* harmony export */ __webpack_require__.d(__webpack_exports__, {
          /* harmony export */ sum: () => /* binding */ sum,
          /* harmony export */
        });
        // usedExports：目的就是标注出来哪些函数是没有被使用的
        // 在这里多了一个魔法注释，会被Terser解析，相当于告诉terser这个函数并没有被使用，他就会进行TreeShaking，效果就是这个函数会被直接删除掉
        /* unused harmony export mul */
        function sum(num1, num2) {
          return num1 + num2;
        }
        function mul(num1, num2) {
          return num1 * num2;
        }

        /***/
      },

minimize设置true

　　usedExports设置为false时，mul函数没有被移除

　　usedExports设置为true时，mul函数被移除了

 

所以他们是结合来使用的

 

sideEffects

sideEffects用于告知webpack compiler哪些模块是有副作用的

使用：在package.json中添加属性sideEffects

　　    当为true时：表示任何模块都是有副作用的(默认)
　　    当为false时：表示任何模块都是没有副作用的(告知webpack可以安全的删除未用到的exports)

　　　 如果我们希望保留，可以设置为数组

演示：

　　　true
　　　当我有一个format.js，只有如下两个函数
　　　　

 

 

 

　　在main.js文件中导入：import "./format";，实则我并没有用到里面的任何函数，但是webpack在打包的时候会保留format.js相关的代码

 

　　false

　　如：我的format.js文件中有副作用，在main.js文件中导入：import "./format";

 

 

 但是在打包后的文件，不会保留format.js相关的任何代码，那么我们在使用window对象中的属性的时候就会显示undefined

　　还有就是通过import语法导入的css文件最终也不会被包含在打包的文件中

 

　　数组
　　　　

 

 

 用于告知webpack哪个模块有副作用，那么在打包的时候，就会包含相关的代码

 

我们一般很少去使用数组的形式去配置该属性那么css文件的问题该如何解决？

 

 

 

CSS实现Tree Shaking

上面我们学习的都是关于JS的Tree Shaking,那么CSS是否也可以进行Tree Shaking

　　CSS的Tree Shaking需要借助于一些其他的插件

　　在早期的时候，我们会使用PurifyCss插件来完成CSS的Tree Shaking,但是目前该库已经不再维护了

　　目前我们可以使用另外一个库来完成CSS的Tree Shaking:PurgeCSS，也是一个帮助我们删除未使用的CSS的工具

安装：

npm i purgecss-webpack-plugin -D

使用：

const PurgePlugin = require("purgecss-webpack-plugin");
const glob = require("glob");
const resolveApp = require("./path");


plugins: [
    new CleanWebpackPlugin({}),
    new MiniCssExtractPlugin({
      filename: "css/[name].[contenthash:8].css",
    }),
    new CssMinimizerWebpackPlugin(),
    new PurgePlugin({
      paths: glob.sync(`${resolveApp("./src")}/**/*`, { nodir: true }),
      safelist() {
        return {
          standard: ["body", "html"],
        };
      },
    }),
    new webpack.optimize.ModuleConcatenationPlugin(),
  ],

paths：表示要检测那些目录下的内容需要被分析

默认情况下，purgecss会将我们的html标签的样式移除掉，如果我们希望保留，可以添加一个safelist的属性

purgecss也可以对less文件进行处理(所以他是对打包后的css进行tree shaking操作)

懒加载(import函数)也是没有问题的

 

HTML文件的压缩

其实我们的html-webpack-plugin插件还有很多的属性，提供我们进行优化

new HtmlWebpackPlugin({
      template: "./index.html",
      // 注入：对打包的js和css文件进行一个注入
      // true，默认值
      // false：不进行注入
      // body:注入到body里面，这里只针对于js文件，css文件本来就是写在head里面的
      inject: true,
      // 当文件没有发生任何改变的时候默认使用之前的缓存
      cache: true,
      // 是否对html文件进行压缩，通常会设置为对象模式
      minify: {
        // 是否要移除注释
        removeComments: true,
        // 是否要移除多余的属性,就像input标签上如果你加上了type="text"他是没有任何的意义的就会给你删除该属性
        removeRedundantAttributes: true,
        // 是否删除一些空属性，如id=""没有意义
        removeEmptyAttributes: true,
        // 折叠空格
        collapseWhitespace: true,
        // 移除Link标签中的type属性
        removeStyleLinkTypeAttributes: true,
        // 对html中的style标签中的样式进行压缩
        minifyCSS: true,
        // 对html中的script中的js代码压缩
        // true，只压缩不丑化
        // 对象形式：对代码进行丑化
        minifyJS: {
          mangle: {
            toplevel: true,
          },
        },
      },