javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > tree shaking移除无用代码

使用tree shaking 移除无用代码

作者:一颗冰淇淋

这篇文章主要为大家介绍了使用tree shaking 移除无用代码示例解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

正文

tree shaking 依赖于ES Module 的静态语法分析,在项目编译时移除无用的代码以减少文件体积。

usedExports

在文件中,我们可能定义了变量但是暂时又没有用到,这样会造成空间的浪费。在 modeproduction 时,会默认做一些配置,将无用的代码删除。为了看到没有做处理时编译后的文件效果,在 webpack 中做如下配置。

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

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

useExports为false

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

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

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

useExports为true

sideEffects

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

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

比如上面这段代码,通过 import 语句引入 format.js,但 format.js 导出的函数没有被使用。

import导入文件没有treeShaking

此时仍然对于 import 语句进行了编译,我们希望在引入的文件中也进行 tree shaking,删除无用的代码,这个时候在 package.json 中配置 sideEffects 属性来处理。

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

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

sideEffect为false

这样引入的 js 文件没有被使用,进行了 tree shaking,可是 css 资源通过 import 引入也被删除了,也不会编译生成对应的 css 文件,解决方式可以选择在 sideEffects 属性中定义数组,或者处理 css 文件的 loader 中配置(推荐)。

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

在这种情况下,在 js 文件中引入的 css 文件就不会直接被移除掉

sideEffect保留css

PurgeCss

不过 sideEffects 属性是不会帮助 css 文件内部进行 tree shaking 操作的,比如没有在代码中创建 divh1 标签,但这段 css 代码也没有被移除。

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

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

PurgeCss

总结

在项目性能优化时,可以通过 tree shaking 来做以下操作

以上就是使用tree shaking 移除无用代码的详细内容,更多关于tree shaking移除无用代码的资料请关注脚本之家其它相关文章!

您可能感兴趣的文章:
阅读全文