One 、 Problem description

CSS Global style , Style of element , Can't be packaged into , After the code introduced by the style is packaged , It's generating main.js There is no . The packaged code passes eval perform , But the above style code cannot be found .

Two 、 Problem analysis

The original configuration tree shaking When , Didn't pay much attention to details , All the time package.json Middle configuration "sideEffects": false,. The starting point of the configuration at that time was good , When I introduce a module , I won't introduce all the code in the module , Instead, only the part of the code used is introduced . When the introduced module is not used , Automatically use tree shaking Shake it off .

because tree shaking Only static import is supported ,ES Module In the form of ; Without support CommonJS Dynamic introduction of . Because if it is introduced dynamically ,tree shaking It is not certain whether it is necessary or not before introduction .
I happen to use ES Module In the form of CSS style ,import './style/css', The problem is that styles don't load at all , Directly be tree shaking Shake it off , Default current css Module not used . Some people are trapped by themselves , For a long time …

When using CSS Module When ,import style from ‘./style.css’; Sometimes styles are suddenly loaded , I felt confused at that time , Now think about it. , Just below React Inside className Used in the className={ style.btn }, Thus, the global style is loaded . Now it's all figured out .

3、 ... and 、 resolvent

resolvent ：1. In fact, we can use require The way , Dynamic introduction css style , To avoid being tree shaking Shake it off .require('./style.css')
2. Yes css Documents don't do tree shaking, stay sideEffect Add an array to ,[ “*.css” ], incorrect css Document carried out tree shaking.[ recommend ]

summary

Pack carefully , Think more