釋義
當我們使用ES Module引入模塊的時候，可能只引入了一部分，并沒有全部引入。
但是打包的時候會把整個引入的文件全部打包度硝。
為了只打包我們引入的部分，使用Tree Shaking
// 我們只引入了one寿冕，但是會把file.js整個文件都打包
import { one } from 'file.js'
支持
Tree Shaking 只支持 ES Module
代碼
package.json
"sideEffects": false,
"version": "1.0.0",
當引入的一些文件沒有暴露內(nèi)容時蕊程，Tree Shaking會忽略掉這部分內(nèi)容，但是這部分代碼也是需要打包的
main.js
import './assets/css/base.css'
比如一些css內(nèi)容驼唱，所以需要在package.json中配置這些內(nèi)容不需要Tree Shaking
"sideEffects": [ "*.css" ],
其他示例
// 實際上@babel/polly-fill并不需要import引入藻茂，所以不需要配置
"sideEffects": [ "@babel/polly-fill" ],
開發(fā)模式：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') // 文件夾
}
}
開發(fā)模式：production
不需要配置
