yuanyuanbyte/Blog

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

yuanyuanbyte opened this issue · 0 comments

yuanyuanbyte commented

本系列的主题是 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"
],
// ...

参考

查看全部文章

博文系列目录

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

交流

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

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

weixin