老师，关于mode=production的tree shaking

Question

老师，我的项目是create-react-app搭建的，我看了下在打包生产环境的代码时，即使sideEffects没有配置，样式文件也并没有被shaking掉，这是为啥呢？

Answer 1

Dell 2019-03-12 22:18:24

这块可能我说的有点问题，tree shaking 应该不会去处理css文件的，其实 sideEffects 里面是用来配置一些基础库的，比如说babel-polyfill这样的东西，避免因为没有使用，直接不打包了

Answer 2

慕勒1632382 2019-03-15 09:14:07

我实际验证了下：

当package.json中不给siedeEffects字段时，生产环境打包不会shaking掉import "@babel/polyfill"和import '../styles/main.scss'，页面能如期显示,async/await之类的代码可以正常运行。

当package.json给了sideEffect为false时，生产环境打包会shaking掉import '../styles/main.scss'，页面不能正常显示样式，但import "@babel/polyfill"没有被shaking，async/await之类的代码可以照常运行。

当然，给siedeEffects加上了["*.css"]之后在生产环境打包就没问题了。

我.babelrc的配置用的是初始配置：

{
"presets": [
"@babel/preset-env"
]
}

欢迎大家参与讨论、指正！

• Dell #1

  感谢同学，那这就证明实际上在开发环境下，tree shaking是不生效的，楼主你看看代码，估计还是你配置的不对。

Answer 3

口是心飞 2019-04-18 09:35:06

是不是你没有开启css modules 原因 ，我在开发的自己配置的时候 发现了 tree shaking 在生产环境是会处理css文件的。我在index.js 导入的全局样式import './css/style.styl' 。 开发环境样式正确加载，   但是我打包之后缺少style.styl的内容。一直没找到原因 今天看到老师的课 实验了一下 才发现是开启了sideEffects：false ，现在已经修复了！