文章目录
1 什么是tree shaking, 为什么要用
前端开发过程中往往需要引入很多第三方库使用, 比如lodash库是一套工具库,内部封装了很多字符串、数组、对象等常见数据类型的处理函数。当我们引入lodash但是没用使用里面的任务方法, 打包的时候webpack仍然会把整个lodash打入包中
2 案例, 引入lodash但是不使用
2.1 目录结构
2.2 webpack.config.js
{
"name": "1",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"webpack": "./node_modules/.bin/webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"lodash-es": "^4.17.11",
"webpack": "^4.26.1",
"webpack-cli": "^3.1.2"
}
}
2.3 src/index.js
// 只引入isArr方法, 并不使用
import { isArr } from './js/a'
2.4 src/js/a.js
import lodash from 'lodash-es'
// 向外暴露一个判断是否是数组的方法
function isArr (par) {
console.log(lodash.isArray(par))
}
export {
isArr
}
2.5 打包
执行 npm run webpack, 下图打包结果显示main.js有85.8kb, 但是我们只是把lodash引入, 并没有使用
3 使用webpack-deep-scope-plugin将没有使用的lodash在打包的时候删除
3.1 npm install --save-dev webpack-deep-scope-plugin
3.2 创建webpack.config.js文件
let webpackDeepScopePlugin = require('webpack-deep-scope-plugin').default
module.exports = {
plugins: [
new webpackDeepScopePlugin()
]
}
3.3 执行打包
npm run webpack, 下图显示最后的main.js只有958bytes, 大大减小包的体积