【webpack】快速笔记12 -- Tree Shaking 概念详解

慢慢剥开 Tree Shaking

index.js:
我们将React相关代码注释掉或者删除，只引入一个@babel/polyfill的包

import "@babel/polyfill";

// import React, {Component} from 'react'
// import ReactDom from 'react-dom'

// class App extends Component {
//     render(){
//         return 
Hello World
//     }
// }

// ReactDom.render(, document.getElementById('root'));

我们此时重新运行npx webpack后发现命令行有一句这样的警告 ↓

大概的意思就是说我们在webpack.config.js使用了useBuiltIns:usage（注意现在已经将这写babel的options配置移动到.babelrc里了），所以我们在打包的入口文件中不必再使用import "@babel/polyfill，这个配置其实已经做了当前包的引入，所以我们在index.js中同样可以将这个导入删除掉，这样就不会警告了

新增math.js文件：

然后对math.js进行导入：

import { add } from './math'

add(1,2);

问题：

此时我们使用 npx webpack 进行打包，启动打包后的 index.html，发现控制台输出了3，说明add的方法正确运行了，然后我们去看一下main.js 最后面几行打包的代码，发现即使我们代码只导入了add方法，打包时它同样将没导入使用的minus方法也放进了main.js：

这不就是我们类似于解决babel中多余的es6转es5时遇到的同样问题吗，此时我们想要的就是我用什么你才打包进去什么~

如何在webpack中使用Tree Shaking

支持前提：

首先Tree Shaking只支持静态引入，而不支持动态引入，通俗说就是只支持ES Module的语法，而并不知道CommonJS的语法

	import { add } from './math.js'   // ES Module √
	
 	const add = require('./math.js')  // CommonJS ×

如何配置Tree Shaking：

在webpack中的配置分两种，一种就是开发环境development，另一种就是生产环境production

① development ↓↓↓

在webpack.config.js中配置：

参考webpack文档： https://webpack.js.org/configuration/optimization/#optimizationusedexports

    optimization:{
        usedExports: true
    }

配置之后他就会识别模块内哪个方法或者对象被使用，才相应的进行打包

在package.json配置：

这个sideEffects是处理Tree Shaking默认忽略的没有导出内容的import导入，就比如import "@babel/polyfill" 或者导入一个css文件时import './style.css'，所以需要sideEffects中保护这个模块不被Tree Shaking忽略，如这样写"sideEffects":["@babel/polyfill","*.css"]，而这里为false就是说Tree Shaking对所有有导出值的导入都生效，毕竟我们文件中没有需要保护的对象，所以不用设置

{
  "name": "webpack-demo",
  "sideEffects": false,   // + 新增
  "version": "1.0.0",
  "description": "",
  "private": true,
  "scripts": {
    "start": "webpack-dev-server"
  },

完成上面两步关于开发环境下的Tree Shaking配置，此时我们重新运行npx webpack打包，再看看此时的mian.js里面是怎样的：

为什么打包文件依然存在不使用的方法代码：
发现打包后的main.js依然存在两个方法，但Tree Shaking其实是生效了，因为它还提示你只有add被使用，这是为什么？好像Tree Shaking并没有按我们想象的来，只是Tree Shaking默认在development环境下是不会去将不使用的模块方法进行删除，因为一旦删除，开发时进行调试报错的话，提示的代码行数就会错乱，因此为了避免这个Bug的出现，Tree Shaking在开发环境下不对不使用的方法进行删除

如果要真正体验一把Tree Shaking删除的话，那就看生产环境 ↓

② production ↓↓↓

在webpack.config.js配置：
更改mode，相对应的配置最优的devtools，最后生产环境不需要optimization这个配置

    mode: 'production',
    // mode: 'development',
    devtool: 'cheap-module-source-map',
    entry: {
        "main": './src/index.js',
    },
    // optimization:{
    //     usedExports: true
    // },

这个配置就应经完成，重新打包一下npx webpack，此时的main.js为压缩后的代码，我们搜索一下console.log发现只有一个，而且也是add的那个方法，而没有使用的minus方法此时在打包文件是不存在的

结语

关于Tree Shaking更多的知识可阅读一下文档：
https://webpack.docschina.org/guides/tree-shaking/

#下一篇讲【如何分离dev与prod环境，让你更接近框架的思维~】