上节： source-map
上节目录如下：
概念
官方：描述移除 JavaScript 上下文中的未引用代码。
也就是希望webpack在打包时把没用到的函数删掉，最常见的就算第三方函数库：lodash,date-fns等。
新建src/js/math.js：
export function add(...arg) {
return arg.reduce((x, y) => x + y);
}
export function sub(...arg) {
return arg.reduce((x, y) => x - y);
}这里定义了两个函数，然后修改src/index.js:
import {add} from './js/math';
console.log(add(2, 4, 11));修改webpack.config.js的mode选项，将production改为development：
// 省略
mode: 'development',
// 省略这样打包后就不会压缩代码了
然后npm run build, 编辑器打开bundles/main.js,一直翻到最后：
可以看到，虽然index.js里只用到了add方法，但webpack还是会把math.js中导出的方法都进行打包，那么tree shaking就是用来解决这个问题的。
开启tree shaking
在package.json里添加一个属性：
package.json:
// 省略
"sideEffects": false,
// 省略sideEffects如果设为false，webpack就会认为所有没用到的函数都是没副作用的，即删了也没关系。
修改wbpack.config.js:
module.exports = {
mode: 'development',
entry: './src/index.js',
output: {
filename: '[name].js',
path: resolve(__dirname, 'bundles')
},
// 开启devServer
devServer: {},
optimization: {
// 优化导出的模块
usedExports: true
},
module: {
rules: [{
test: /\.(gif|jpg|jpeg|png|svg)$/,
use: ['url-loader']
}, {
test: /\.less$/,
use: ['style-loader', 'css-loader', 'postcss-loader', 'less-loader']
}]
},
plugins: [
new HtmlWebpackPlugin({
template: './index.html'
}),
new CleanWebpackPlugin()
]
};然后npm run build, 打包bundles/main.js:
这个注释表明webpack已识别出哪些方法是真正被用到的，但是继续看111行：
这两个方法还在，说明这次打包只是标记出了用到的方法，tree shaking的效果并未生效，这是因为刚才的打包模式是develpoment, 在mode === develpoment的情况下，因为需要source-map调试，如果删掉代码，source-map的标记位置就不准确了，所以得在production模式下才能试tree shaking。
修改webpack.config.js:
module.exports = {
mode: 'production',
entry: './src/index.js',
output: {
filename: '[name].js',
path: resolve(__dirname, 'bundles')
},
// 开启devServer
devServer: {},
// optimization: {
// // production模式下默认开启
// usedExports: true
// },
module: {
rules: [{
test: /\.(gif|jpg|jpeg|png|svg)$/,
use: ['url-loader']
}, {
test: /\.less$/,
use: ['style-loader', 'css-loader', 'postcss-loader', 'less-loader']
}]
},
plugins: [
new HtmlWebpackPlugin({
template: './index.html'
}),
new CleanWebpackPlugin()
]
};再次npm run build:
代码被压缩了，我们可以ctrl + f搜索reduce 发现只有这个add方法，那个sub被去除了，这样tree shaking就生效了
注意事项
在实际的项目里，我们自己写的方法如果没用到，基本也不会有啥问题，但是第三方模块和样式就不好说了，比如在index.js中引入：
这种全局引入的方式，webpack依然会视为没用到的模块而被tree shaking掉，这些代码就是所谓的，有副作用的代码，我们要禁止对他们tree shaking.
修改package.json的sideEffects属性：
// 省略
"sideEffects": [
// 数组里列出黑名单，禁止shaking下列代码
"@babel/polly-fill",
"*.less",
// 其它有副作用的模块
"./src/some-side-effectful-file.js"
],
//省略这样tree shaking就不会误删代码了。
下节：区分开发和生产环境