Tree Shaking

Tree Shaking

　　只支持 import   ES2015 import 这种静态引入

　　不支持require CommonJS 这种动态引入

前景提要：

　　当我们使用math.js文件的cube功能时，通常这样做：

 我们只使用了math.js里面的cube但是用webpack打包

后出现下面这种情况： [把没有用到的square也打包到最终文件bundle.js里去了]

Tree Shaking 的功能：

　　引入一个模块的部分功能后，将该模块下其他没有用到的功能摇晃掉。

Tree Shaking用法：

　　development模式下：

　　　　在webpack.config.js里添加：

 mode: 'development',
 optimization: {
   usedExports: true,   // 开启Tree Shaking功能
 }

　　　　在 package.json 里添加属性 "sideEffects". 

{
  "name": "your-project",
  "sideEffects": false  // 不考录副作用
}

　　　　“副作用”指在导入时执行特殊行为的代码，而不公开一个或多个导出。

　　　　 一个例子是polyfill，它会影响全局范围，通常不提供出口。import "@babel/polyfill"

　　　　 一个例子是css文件。import "reset.css"

　　　　开启Tree Shaking 后在打包：

 　　　在development模式下，即使开启了Tree Shaking 打包后还是会将引入

　　　　的文件全部打包，但申明了引入的模块中哪些功能被用到，哪些没有被

　　　　用到。

　　　　但是在production模式下，引入的文件中没用用到的功能会被删除。

　　　　development模式下，只是申明但不实际删除的目的是为了在错误

　　　　提示里，能够准确指示是哪一行出现了错误。

　　production模式下：

　　　　不用手写下面这个配置，因为生产模式下自动开启了这个配置。

optimization: {
    usedExports: true
}

---------------------------------------------------------------------------------

怎样规避副作用：

{
  "name": "your-project",
  "sideEffects": [
    "./src/some-side-effectful-file.js",
    "*.css"
  ]
}