前言

webpack4新增了一个sideEffects新特性，它允许我们通过配置的方式，去标识我们的代码是否有副作用，从而为Tree-shaking提供更大的压缩空间。
这里的副作用指的是模块执行时除了导出成员之外所做的事情。
sideEffects一般用于npm包标记是否有副作用。

一、sideEffects的使用

文件结构：

测试文件代码如下：

// components/button.js
export const Button = () => {return document.createElement('button')console.log('dead-code'); // 未引用代码
}// components/heading.js
export const Heading = () => {return document.createElement('h' + level)
}// components/link.js
export const Link = () => {return document.createElement('a')
}// components/index.js
export { default as Button } from './button'
export { default as Link } from './link'
export { default as Heading } from './heading'// index.js
import { Button } from "./components"
document.body.appendChild(Button())

打包，查看效果

未引用代码也被打包了，sideEffects就可以用来解决此类问题。
webpack.config.js新增sideEffects配置


module.exports = {mode:"none",entry:"./src/index.js",output:{filename:"bundle.js"},optimization:{sideEffects: true}
}

开启了sideEffects配置后，webpack在打包时就会先检查当前代码所属的package.json中有没有sideEffects的标识，以此来判断这个模块是不是又副作用。如果这个模块没有副作用，这些没被用到的模块就不会被打包。（这个特性在production模式下会自动开启）

在package.json中配置以下"sideEffects":false

此时再去执行打包，bundle.js中就会清除未引用代码了。

二、sideEffects注意事项

使用sideEffects的前提就是确定你的代码真的没有副作用，否则的话，在webpack打包时，就会误删掉那些有副作用的代码。

例如src目录下有一个extends.js文件

// extends.js
Number.prototype.pad = function(size){let result = this + ""while(result.length < size){result = "0" + result}return result;
}

在index.js中执行这个模块的内容，为Number原型对象上添加一个pad方法。再执行一个公共css代码模块。

// index.js
import { Button } from "./components"
import "./extends"
import "./global.css"console.log((8).pad(3));
document.body.appendChild(Button())

打包效果如下：

extends.js模块和global.css模块都没被打包。因为它们都算是副作用模块，而我们在package.json中声明了没有副作用，所以它们就被移除了。

解决办法就是在package.json中关闭副作用，或者标识以下当前文件中有哪些文件是有副作用的。

"sideEffects": ["./src/extends.js","*.css" ]

此时打包就不会移除标识了的副作用模块了。

webpack之sideEffects相关推荐

css-6 df15,webpack 样式文件的代码分割(15)
获取全套webpack 4.x教程,请访问瓦力博客在上一小节,我们将开发环境和生产环境区分开来.这一小节,我们来操作如何将样式文件的代码分割. 1.安装 yarn add mini-css-extr ...
webpack高级应用篇（九）：tree shaking（usedExports）与 sideEffects
目录 tree shaking(usedExports) tree shaking 前 tree shaking 后 sideEffects(副作用) 解释 tree shaking 和 `sideE ...
webpack二刷之五、生产环境优化（3.sideEffects 副作用）
sideEffects 副作用 webpack4新增的功能. 允许通过配置的方式去标识代码是否有副作用,从而为 Tree Shaking 提供更多的压缩空间. sideEffects 一般用于开发np ...
浅入浅出webpack
准备了挺久,一直想要好好深入了解一下Webpack,之前一直嫌弃Webpack麻烦,偏向于Parcel这种零配置的模块打包工具一些,但是实际上还是Webpack比较靠谱,并且Webpack功能更加强大 ...
前端每周清单第 49 期：Webpack 4 Beta 尝鲜，React Windowing 与 setState 分析
前端每周清单专注前端领域内容,以对外文资料的搜集为主,帮助开发者了解一周前端热点:分为新闻热点.开发教程.工程实践.深度阅读.开源项目.巅峰人生等栏目.欢迎关注[前端之巅]微信公众号(ID: fron ...
webpack从入门到精通（四）优化打包配置总结②
1. tree shaking tree-shaking的本质是消除无用的js代码.无用代码消除广泛存在于传统的编程语言编译器中,编译器可以判断出某些代码根本不影响输出,然后消除这些代码,这个称之为D ...
webpack打包生成的map文件_从这十几个方面优化你的 Webpack 配置
目录开发环境性能优化生产环境性能优化开发环境性能优化优化打包构建速度 HMR 优化代码调试 source-map HMR ❝ 概念:「HMR:」 hot module replacement ...
（六）构建优化(揭开webpack性能优化的内幕)
构建优化 webpack的优化配置[了解这些优化配置才敢说会用webpack] Tree-shaking JS压缩作用域提升 Babel的优化配置 webpack的依赖优化 noParse(不解析) ...
弄懂webpack，只要看这一片就够了（文末有福利）
什么是webpack webpack是什么,官网中是这么说的. 本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler).当 webp ...

webpack之sideEffects

webpack之sideEffects

前言

一、sideEffects的使用

二、sideEffects注意事项

webpack之sideEffects相关推荐

最新文章

热门文章