wepack4.28.2 最新 了解JS Tree Shaking

1、初始化项目

npm init  demo1   (前提已安装各种webpack ,node , npm)

自动会创建package.json文件

{
  "name": "demo1",
  "version": "1.0.0",
  "description": "对比JS Tree Shaking的优化好处",
  "main": "index.js",
  "dependencies": {
    "anywhere": "^1.4.0",
    "yarn": "^0.24.5"
  },
  "devDependencies": {},
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

2、新建webpack.config.js

执行webpack命令会自动找到webpack.config.js，进行编译。
安装一个webpack-bundle-analyzer 插件可观察打包之后的大小

const path = require('path'); 
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');

// common 语法，module.exports 是个对象或function
module.exports = {
  entry:  {
    app: path.resolve(__dirname + '/src/index.js')
  },
  output: {
    path: path.resolve(__dirname + '/dist'),
    filename: '[name].js'
  },
  mode: 'production',
  plugins: {
    new BundleAnalyzerPlugin({analyzerMode: 'static'}),
  }
}

3、什么是Tree Shaking？

字面意思是摇树，一句话：项目中没有使用的代码会在打包时候丢掉。JS 的 Tree Shaking 依赖的是 ES2015 (俗称ES6)的模块系统（比如：import和export）

4、自身模块

在webpack v4中，不再需要配置UglifyjsWebpackPlugin，取而代之的是，更加方便的配置方法。

只需要配置mode为"production"，即可显式激活 UglifyjsWebpackPlugin 插件。
当mode为development时，会全部打包进去。所以需要设置mode为production。

注意：根据版本不同，更新的webpack v4.x不配置mode也会自动激活插件

新建util.js：

export function funA() {
  return {
    funA: 'funA'
  }
}
export function funB() {
  return {
    funB: 'funB'
  }
}
export function funC() {
  return {
    funC: 'funC'
  }
}

新建src/index.js引用

import {
  funA
} from './utils.js';
console.log(funA());

执行webpack打包，

可以看到 并没有funB,funC,只有funA。说明Js Tree Shaking成功。

4、插件模块

安装一个loash用来作比较
npm install lodash -D

import { throttle } from 'lodash';
throttle(() => {
  console.log('----')
},1000)

app.js大小是70.4kb

本文开头讲过，js tree shaking 利用的是 es 的模块系统。而 lodash.js 没有使用 CommonJS 或者 ES6 的写法。所以，安装库对应的模块系统即可。

然后 lodash-es 后，打包出来的大小

npm install lodash-es -D

import { throttle } from 'lodash-es';
throttle(() => {
  console.log('----')
},1000)

app.js大小是3.44kb

很明显看出来包小了很多很多。

友情提示：在一些对加载速度敏感的项目中使用第三方库，请注意库的写法是否符合 es 模板系统规范，以方便webpack进行tree shaking。