释义
当我们使用ES Module引入模块的时候，可能只引入了一部分，并没有全部引入。
但是打包的时候会把整个引入的文件全部打包。
为了只打包我们引入的部分，使用Tree Shaking
// 我们只引入了one，但是会把file.js整个文件都打包
import { one } from 'file.js'
支持
Tree Shaking 只支持 ES Module
代码
package.json
"sideEffects": false,
"version": "1.0.0",
当引入的一些文件没有暴露内容时，Tree Shaking会忽略掉这部分内容，但是这部分代码也是需要打包的
main.js
import './assets/css/base.css'
比如一些css内容，所以需要在package.json中配置这些内容不需要Tree Shaking
"sideEffects": [ "*.css" ],
其他示例
// 实际上@babel/polly-fill并不需要import引入，所以不需要配置
"sideEffects": [ "@babel/polly-fill" ],
开发模式：development
webpack.config.js
const path = require('path');
module.exports = {
mode: 'development',
optimization: { // Tree Shaking
usedExports: true
},
entry: './src/index.js', // 入口文件
output: {
filename: 'bundle.js', // 文件名
path: path.resolve(__dirname, 'dist') // 文件夹
}
}
开发模式：production
不需要配置
