webpack深度tree shaking的模块webpack-deep-scope-plugin使用

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, 大大减小包的体积