16、webpack从0到1-tree shaking---Ewall

tree shaking，这个还是一个比较重要的一个东西吧，可以大大的优化你的项目。 git仓库：webpack-demo

1、是什么？我们首先从字面意思上来理解一下，tree shaking翻译一下就是摇树罗，摇树的时候就会把不必要的枯枝烂叶给摇下来，同理，到代码中，tree shaking就是把没有用到的代码shaking掉。tree-shaking只有使用es6的模块化规范才有效，如果你使用commonJs模块化规范是搞不了tree-shaking的，为什么？

因为ES6模块是运行时加载（静态加载），即可以在编译时就完成模块加载，使得编译时就能确定模块的依赖关系，可以进行可靠的静态分析，这就是tree shaking的基础。 而CommonsJs必须在跑起来运行的时候才能确定依赖关系，所以与不能tree-shaking。 -- 参考阮大神的讲解-->Module 的语法 概述

2、配置开发环境如果你看要tree-shaking的一个具体的效果，那么你需要在mode:development中，因为在生产环境的时候，webpack会自动帮我们做tree-shaking。示例代码可以直接看官网的，大概就这么几个配置：设置usedExports为truemode: 'development', optimization: { usedExports: true, }, package.json中设置下sideEffects，也可以是一个数组如"sideEffects": ["*.css"]就表示所有引入的css文件不做tree-shaking。{ "name": "webpack-easy-demo", + "sideEffects": false, }这里配置好了就ok了，但是有个最大的问题是什么，看官网是这么说的：

Ensure no compilers transform your ES2015 module syntax into CommonJS modules (this is the default behavior of the popular Babel preset @babel/preset-env - see the documentation for more details). 要确保没有编译器把es6的语法转换为require这种commonJs的这种写法，但是babel的这个@babel/preset-env配置的默认行为就是如此。

我们配置使用bable配置es6的时候就要使用了这个，如此一来，岂不凉了？为了不让babel将es6的import/expot转为commonJs规范的require写法，我们需要这样：{ loader: "babel-loader", options: { presets: [ [ "@babel/preset-env", { useBuiltIns: "usage", corejs: { version: 3, proposals: true }, + // 禁止将import/export转为require写法 + modules: false } ] ] } }3、配置生产环境配置生产环境就很简单了。 将mode设置为production；设置下sideEffects;设置下bable配置modules: false。4、小结 根据官网的conclusion总结，开启tree-shaking有四点： 必须使用es6的模块化规范（import/export）;要确保你的编译器不会将es6的import/expot转为commonJs规范的require写法；（所以我们需要将@babel/preset-env的modules参数设置为false）在package.json中添加sideEffects告诉webpack哪些是不用tree-shaking的文件。模式mode要为production，因为production会自动使用terser-webpack-plugin这个插件来做一些压缩、无用代码的剔除实现tree-shaking。 这块内容有点东西啊，也不知道我理解的对不对，看看别人的文章吧： https://juejin.im/post/5a4dc842518825698e7279a9https://es6.ruanyifeng.com/#docs/modulehttps://juejin.im/post/5d706172f265da03ca118d28https://juejin.im/post/5dcec27d5188254b0147e619https://webpack.js.org/guides/tree-shaking/#conclusion ---来自腾讯云社区的---Ewall