您现在的位置是:首页 > Javascript
当前栏目
tree shaking(摇树优化)
2023-03-31 10:44:29 时间
tree shaking(摇树优化)
前言
随着js的不断发展,性能优化成了主流的方向,但是如何性能优化又成了现在程序员的一大苦恼,而我作为一名前端小白,也就深陷其中,最近学习到了tree shaking,在这里分享一下
一、tree shaking是什么?
在前端的性能优化中,es6 推出了tree shaking机制,tree shaking就是当我们在项目中引入其他模块时,他会自动将我们用不到的代码,或者永远不会执行的代码摇掉,在Uglify阶段查出,不打包到bundle中。
只支持ES6 Module代码。在production 环境默认开启。
二、哪些情况下可以使用tree-shaking呢?
1.首先,要明确一点:Tree Shaking 只支持 ESM 的引入方式,不支持 Common JS 的引入方式。
- ESM: export + import
- Common JS: module.exports + require
提示:如果想要做到tree shaking,在引入模块时就应该避免将全部引入,应该引入局部才可以触发tree shaking机制
代码如下(示例):
// Import everything (not tree-shaking)
import lodash from 'lodash';
// Import named export (can be tree-shaking)
import { debounce } from 'lodash';
// Import the item directly (can be tree-shaking)
import debounce from 'lodash/lib/debounce';
三、项目中如何配置tree-shaking?
1、开发环境配置tree shaking
// webpack.config.js
module.exports = {
// ...
mode: 'development',
optimization: {
usedExports: true,
}
};
- 生产环境下的配置
// webpack.config.js 生产环境下只需要把mode配置成‘production’即可
module.exports = {
// ...
mode: 'production',
};
- sideEffects: false
根据环境的不同进行配置以后,还需要在 package.json 中,添加字段:**sideEffects: false,**告诉 Webpack 哪些代码可以处理
{
"name": "webpack-demo-1",
"sideEffects": false,
// ...
}
// 列子:
// All files have side effects, and none can be tree-shaken
{
"sideEffects": true
}
// No files have side effects, all can be tree-shaken
{
"sideEffects": false
}
// Only these files have side effects, all other files can be tree-shaken, but these must be kept
{
"sideEffects": [
"./src/file1.js",
"./src/file2.js"
]
}
五、sideEffects 对全局 CSS 的影响
- 对于那些直接引入到 js 文件的文件,例如全局的 css,它们并不会被转换成一个 CSS 模块。
/* reset.css */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
background-color: #eaeaea;
}
// main.js
import "./styles/reset.css"
- 这样的代码,在打包后,打开页面,你就会发现样式并没有应用上,原因在于:上面我们将 sideEffects 设置为 false后,所有的文件都会被 Tree Shaking,通过 import 这样的形式引入的 CSS 就会被当作无用代码处理掉。
- 为了解决这个问题,可以在 loader 的规则配置中,添加 sideEffects: true,告诉 Webpack 这些文件不要Tree Shaking。
// webpack.config.js
module.exports = {
// ...
module: {
rules: [
{
test: /.css$/i,
use: ["style-loader", "css-loader"],
sideEffects: true
}
]
},
};
总结
- tree shaking就是类似一棵树有长熟的苹果,将已经成熟的苹果摇掉减轻树的负担,这就实现了这个机制
- 在es6中的import和export才可以触发这个机制
- 项目中对tree-shaking的配置
- tree-shaking对项目中的影响
相关文章
- TiDB Binlog 组件正式开源
- 使用Visual Studio Code对Node.js进行断点调试
- 推荐!数据可视化的十种优秀JavaScript图表库
- Node.js在复杂集成场景下占据统治地位的五个理由
- 玩转Node.js单元测试
- Node.js中内存泄漏分析
- Angular对React:一场关于Web开发者支持率的史诗对决
- 热点推荐:什么是后端开发?
- 谈谈Spring boot 启动层面的开发
- 使用NodeJS将文件或图像上传到服务器
- 编写React组件的最佳实践
- JavaScript MV*框架最值得关注的七个亮点
- 前端开发指南:如何利用PHP Cake框架构建应用
- 基于React与Vue后,移动开源项目Weex如何定义未来
- NodeJS和C++之间的类型转换
- jQuery中的常用到的三十九个技巧
- 官宣|Google Developers中国网站发布!
- NodeJS和C++之间的类型转换
- .NET Core首例Office开源跨平台组件(NPOI Core)
- 如何写出漂亮的React组件