Webpack性能优化系列之 tree shaking (去除未引用代码，减少代码体积)

[yuanyuanbyte]

本系列的主题是 Webpack，每期讲解一个技术要点。如果你还不了解各系列内容，文末点击查看全部文章，点我跳转到文末。

如果觉得本系列不错，欢迎 Star，你的支持是我创作分享的最大动力。

tree shaking

tree shaking 是一个术语，用于描述移除 JavaScript 上下文中的未引用代码(dead-code)。它依赖于 ES2015 模块语法的 静态结构 特性，例如 import 和 export。

tree shaking 可以去除未引用代码，减少代码体积。

前提是：必须使用ES6模块化

使用方法：开启production环境就会自动启动tree shaking

问题：

tree shaking不同版本会有一点点差异，这些差异会无意之间将我们的css代码当作未引用代码而把它干掉

为了解决这个问题，我们需要在 package.json 中添加 "sideEffects" 属性。

"sideEffects": false 代表：所有代码都没有副作用（都可以进行tree shaking），这是sideEffects的默认值，这可能会把css / @babel/polyfill （副作用）等文件干掉

我们可以通过配置sideEffects解决上述问题：

package.json

// ...
"sideEffects": [
  "**/*.css",
  "**/*.scss",
  "./esnext/index.js",
  "./esnext/configure.js"
],
// ...

参考

• Webpack5从入门到精通
• webpack 中文文档 (docschina.org)

查看全部文章

博文系列目录

• JavaScript 深入系列
• JavaScript 专题系列
• JavaScript 基础系列
• 网络系列
• 浏览器系列
• Webpack 系列
• Vue 系列
• 性能优化与网络安全系列
• HTML 应知应会系列
• CSS 应知应会系列

交流

各系列文章汇总：https://github.com/yuanyuanbyte/Blog

我是圆圆，一名深耕于前端开发的攻城狮。