概念：tree shaking是打包的时候，打包已经使用的代码，未使用的代码不会被打包。
一、配置
开发环境
- 1.说明
开发环境中我们需要在
webpack.config.js中配置 - 2.
webpack.config.js中
...
module.exports = {
...
mode: 'development', // 指定构建模式
...
optimization: {
usedExports: true
},
output: {
filename: '[hash]_[name].js', // 指定构建生成的文件名
path: path.resolve(__dirname, 'dist'), // 指定构建生成文件所在路径
},
...
}
- 3.
package.json中
{
"name": "xxxx",
"sideEffects": [
"*.css"
],
...
}
说明：这里sideEffects配置 除了.css的文件不会使用tree shaking。同时，我们想要排除一些文件不适用tree shaking就可以在这里写入。
生产环境
-
1.说明 生产环境我们只需要在
package.json中进行 -
2.
webpack.config.js中
...
module.exports = {
...
mode: 'production', // 指定构建模式
...
}
- 3.
package.json中
{
"name": "xxxx",
"sideEffects": [
"*.css"
],
...
}
二、案例
代码构建测试
- 1.新建
src/math.js
export const add = (a, b) => {
console.log(a + b);
}
export const minus = (a, b) => {
console.log(a - b);
}
- 2.修改
src/index.js
import { add } from './math.js'
add(2, 2);
两种模式下打包
- 1.
development模式下，可以看到注释提示 - 2.
production模式下，为引入的minus方法将不会被打包进去
