sideEffects导致的全局样式消失

最新推荐文章于 2023-06-20 22:29:16 发布

Buliang_C

最新推荐文章于 2023-06-20 22:29:16 发布

阅读量779

点赞数

分类专栏： webpack 文章标签： webpack

本文链接：https://blog.csdn.net/o__o__o__o/article/details/117606495

版权

webpack 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

文章目录

一、问题描述
二、问题分析
三、解决方法
总结

一、问题描述

CSS全局样式，元素的样式，均无法被打包引入，样式引入的代码打包后，在生成main.js中直接没有。打包之后的代码都通过eval执行，但是无法找到上述样式代码。

二、问题分析

当初配置tree shaking的时候，没有太注意细节，就一直在package.json中配置 "sideEffects": false,。当时配置的时候出发点是好的，就是当我引入一个模块的时候,我不引入模块中所有的代码,而是仅引入使用的代码部分。当引入的模块没有使用的时候，就自动用tree shaking把它摇掉。

因为tree shaking只支持静态引入的方式，ES Module的形式；而不支持CommonJS的动态引入方式。因为动态引入的话，tree shaking不能确定在引入之前是需要或者不需要。
我刚好用ES Module的形式引入全局CSS样式，import './style/css'，导致的问题就是样式根本不会加载，直接被tree shaking摇掉了，默认当前css模块没有使用。有被自己坑到，检查了好久…

当使用CSS Module的时候，import style from ‘./style.css’; 有时候会突然加载出样式，当时觉得很迷惑，现在想想，只是在下面的React里面className中用到了 className={ style.btn }，从而全局样式就被加载了。现在终于想通了。

三、解决方法

解决方法：1. 其实我们可以使用require的方式，动态的引入css样式，从而避免被tree shaking摇掉。require('./style.css')
2. 对css文件不做tree shaking，在sideEffect中加入数组，[ “*.css” ]，不对css文件进行tree shaking。[推荐]