tree shaking 依赖于ES Module 的动态语法分析，在我的项目编译时移除无用的代码以缩小文件体积。

usedExports

在文件中，咱们可能定义了变量然而临时又没有用到，这样会造成空间的节约。在 mode 为 production 时，会默认做一些配置，将无用的代码删除。为了看到没有做解决时编译后的文件成果，在 webpack 中做如下配置。

module.exports = {  // 其余配置省略  mode: 'development',  optimization: {    minimize: false,    usedExports: false,  },};

在这种配置状况下，当存在没有用到的变量时，还是照原样编译到了 js 文件中。

想要移除掉 js 文件中的无用代码，开启 minimize 通过 usedExports 配置

module.exports = {  // 其余配置省略  mode: 'development',  optimization: {    minimize: true,    usedExports: true,  },};

这样编译后就将没有用到的变量 username 和 foo 函数都移除掉了

sideEffects

这时候仍存在一个问题，如果通过模块化引入另一个js文件，即便没有被应用，useExports 也不会进行 tree shaking。

// index.jsimport './format.js';// format.jsexport function timeFormat() {  return '2022-01-01';}

比方下面这段代码，通过 import 语句引入 format.js，但 format.js 导出的函数没有被应用。

此时依然对于 import 语句进行了编译，咱们心愿在引入的文件中也进行 tree shaking，删除无用的代码，这个时候在 package.json 中配置 sideEffects 属性来解决。

// package.json 其余配置省略{    "sideEffects": false}

sideEffects 用于告知 webapck 编译器哪些模块有副作用

  • 定义为 false，示意所有的模块都不存在副作用，不须要用到的时候间接删除
  • 定义为数组，告知有副作用的模块，该模块中有副作用的代码会被保留，没有副作用且没有应用到的代码会被删除。

这样引入的 js 文件没有被应用，进行了 tree shaking，可是 css 资源通过 import 引入也被删除了，也不会编译生成对应的 css 文件，解决形式能够抉择在 sideEffects 属性中定义数组，或者解决 css 文件的 loader 中配置（举荐）。

// package.json{    "sideEffects": [        "**.css"    ],}// webpack.config.jsmodule.exports = {  module: {    rules: [      {        test: /\.css$/,        // 其它配置省略        sideEffects: true,      },    ],  },};

在这种状况下，在 js 文件中引入的 css 文件就不会间接被移除掉

PurgeCss

不过 sideEffects 属性是不会帮忙 css 文件外部进行 tree shaking 操作的，比方没有在代码中创立 div 和 h1 标签，但这段 css 代码也没有被移除。

想要在css代码中进行 tree shaking 可借助 purgecss-webpack-plugin。通过 npm install purgecss-webpack-plugin -D 装置后在 package.json 中配置。

// package.jsonconst PurgecssPlugin = require('purgecss-webpack-plugin');const glob = require('glob');const path = require('path');const dirname = process.cwd();const resolveApp = (folder) => path.resolve(dirname, folder);module.exports = {  plugins: [    new PurgecssPlugin({      paths: glob.sync(`${resolveApp('./src')}/**/*`, { noDir: true }),      safelist: function () {        return {            standard: ['html', 'body'],        };      },    }),  ],};
  • paths：示意要检测哪些目录下的内容须要被剖析
  • glob：对某些文件、文件夹通过正则表达式来进行匹配， webpack或其余插件曾经装置过
  • noddir：示意匹配文件，不匹配文件夹
  • safelist：默认状况下，Purgecss会将html、body标签的款式移除掉，如果心愿保留，须要在safelist中增加

这样 css 文件外部也会移除掉无用的代码

总结

在我的项目性能优化时，能够通过 tree shaking 来做以下操作

  • optimization 中配置 usedExports 为 true，移除 js 无用代码。
    ( 这也是 mode 为 production 时的默认配置 )
  • package.json 中配置 sideEffects 为 false，css 在 loader 中设置 sideEffects 为 true，对模块进行优化。
  • 应用 PurgeCss 来对 css 文件外部的代码进行 tree shaking。

以上就是对于 tree shaking 的介绍， 更多无关 webpack 的内容能够参考我其它的博文，继续更新中~