package.json 中的sideEffects 行为记录

这个属性是有关 Tree Shaking 的。本文不讨论什么是tree-shaking了。（看webpack官网介绍）

这里要注意，这个package.json 中的 sideEffects属性不是npm官方的标准（npm官网没找到）。

是Webpack 官方推出的私有属性。而 Rollup 也适配了这个属性。

前言

本人用vite构建vue组件库项目，及在webpack项目中使用该组件库。发现Rollup(vite底层)与Webpack 对于sideEffects 的处理方式有些不同。

sideEffect指定哪些文件具有副作用。

Tree Shaking 行为

Tree Shaking 会删除未被导入的代码。如果模块标记有副作用则不会删除模块中未导出的代码。

如

// module
export function A(){}
export function B(){} // 这种代码就算标记有副作用，如果没有被其他import {} from 则也会被删除
console.log('C');// 如果标记为副作用，则这种代码不会删除。

环境

组件库

• vite@4.3.2
• storybook/vue3@7.0.12

使用项目

• webpack@5.83.1

现象

Vite(Rollup)

sideEffect默认true，表示本项目全有副作用，不要Tree Shaking。

我配置sideEffect: [] 空数组，行为和默认一样。

配置sideEffect: ["lib/**/index.ts"]。希望在webpack 中使用该组件库时，能自动Tree Shaking 掉未导入的模块。此时，我构建组件库时，它把我index.ts 中 import './style.less'; 删掉了！导致样式缺失。

特殊情况记录

有下面组件代码

// Button.js
import './style.less';
export { default as Button } from './index.vue'

打包在打包入口main.js 引入 import {Button} from './Button.js'

即使我增加标注 sideEffect: ["*.less"] 为有副作用，防止被摇掉。发现，我的style依然被删除了。这就难以理解了。

后来我将sideEffect 中加上 "Button.js" 此时style没有被摇掉。

导入less打包行为

import "./style.css";  css/less 这种样式文件指定有副作用也会被全部删除。然后在打包产物js上面加上一行 const [style文件名] = "";（迷惑），然后单独生成一个style.css文件。

小结

import 'xxx' 这种会被识别为未使用的代码，等价于import {} from 'xxx'。如果这个模块被标注为有副作用。则会删除所有export 的代码。保留其他代码。

关于less样式导入问题。或许和导入样式后，经过打包后生成的 const xx="" 有关。因为这段代码在文件中属于副作用。所以，配置此文件有副作用才能避免样式被树摇。

Webpack

sideEffect 中指定的文件表明有副作用，在其他文件中引入标注的就不会Tree Shaking。

在Webpack 中使用自己开发的组件库。组件库代码是否Tree Shaking，取决于组件库根目录下的package.json 中描述的sideEffects。

因此我在组件库的package.json 中配置入口文件的所有依赖为有副作用。

比如

index.js

export { default as Button } from './packages/Button';
export { default as Tag } from './pacakges/Tab';

我指定sideEffect为packages/**/index.ts; 

这样在实际使用组件库时

import { Button, Tab } from '组件库';

这样就可以正常Tree Shaking