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" ] }

这里引用了webpack文档中的配置  

   

   
，点击即可查看详情

五    

     

    、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对项目中的影响