摇树优化之webpack（4.6.0） tree shaking

无需原生开发基础，也能完美呈现京东商城。《混合开发京东商城系统，提前布局大前端》课程融合vue、Android、IOS等目前流行的前端和移动端技术，混合开发经典电商APP——京东。课程将各种复杂功能与知识点完美融合，从技术原理到开发上线，让你真实感受到一个明星产品开发的全过程。功能实现之外，还有一流用户体验和优秀交互设计等你一探究竟，拓宽开发眼界。

---

1、为什么要进行tree shaking

在我们平时的开发之中，经常会引入一些工具类库， 比如说 bootstrap， f7 等等UI样式库 或者像 jQuery、lodash等一些js类库，或者自己编写一些utils类作为工具方法，但是引入的这些方法和类库我们基本不会把他们所有的功能或者说所有的方法都使用到 ， 往往只是使用了其中几个方法，或者几个样式 。 这样的话 ， 如果我们在打包的过程之中把整个类库都打包进来会造成极大的资源浪费，所以 摇树优化 应运而生 。

2、什么是tree shaking

tree shaking 是一个术语，通常用于描述移除 JavaScript 上下文中的未引用代码(dead-code)。它依赖于 ES2015 模块系统中的静态结构特性，例如 import 和 export。这个术语和概念实际上是兴起于 ES2015 模块打包工具 rollup。

这是webpack中对tree shaking的定义，其实就是说把我们项目中没有使用到的代码在打包的时候丢弃掉，只保留我们引入了的JS代码和css代码。

3、如何利用webpack进行tree shaking

1：JS的tree shaking

我们先来看一个没有进行tree shaking的代码。
项目结构如下

utils.js代码

export function a () {
    console.log('This is a');
}

export function b () {
    console.log('This is b');
}

export function c () {
    console.log('This is c');
}

app.js代码

import {a} from './utils.js';

a();

我们可以看到 在 utils.js中我们定义了三个方法， 在app.js中引入了方法a，也就是说方法b和方法c都是没有使用的。 我们看一下打包之后的结果

/***/ "./src/js/utils.js":
/*!*************************!*\
  !*** ./src/js/utils.js ***!
  \*************************/
/*! exports provided: a, b, c */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"a\", function() { return a; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"b\", function() { return b; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"c\", function() { return c; });\nfunction a () {\n    console.log('This is a');\n}\n\nfunction b () {\n    console.log('This is b');\n}\n\nfunction c () {\n    console.log('This is c');\n}\n\n//# sourceURL=webpack:///./src/js/utils.js?");

/***/ })

从打包之后的代码片段我们可以看到，exports provided: a, b, c， 引入方法 a, b, c 。
接下来我们使用webpack提供的plugin，UglifyjsWebpackPlugin ， 来进行我们的摇树优化 ，看一下webpack对UglifyjsWebpackPlugin的定义

This plugin uses UglifyJS v3 (uglify-es) to minify your JavaScript

/*
	webpack =< v3.0.0 currently contains v0.4.6 of this plugin under webpack.optimize.UglifyJsPlugin as an alias. For usage of the latest version (v1.0.0), please follow the instructions below. Aliasing v1.0.0 as webpack.optimize.UglifyJsPlugin is scheduled for webpack v4.0.0
*/

这是一个用来压缩你的JavaScript的插件，如果你使用的是 webpack4.0.0之前的版本，那么应该使用 webpack.optimize.UglifyJsPlugin， 如果你要使用UglifyjsWebpackPluginv1.0的话， 那么就要配合webpackV4之后的版本了。因为我们例子使用的是 webpack V4.6.0的最新版本，所以我们直接使用UglifyjsWebpackPlugin。

首先我们需要安装我们的uglifyjs-webpack-plugin

npm i -D uglifyjs-webpack-plugin

接下来打开 webpack.config.js文件，进行uglifyjs-webpack-plugin的配置

var path = require('path');
var UglifyJsPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
    mode: 'production', //注意这里需要设置生产模式
 
    entry : {
        'app' : './src/js/app.js'
    },

    output: {
        path: path.resolve(__dirname, './dist'),
        publicPath: './dist/',
        filename: '[name].bundle.js',
    },
    plugins: [
        new UglifyJsPlugin({
            test: /\.js$/
        }),
    ]
}

引入 uglifyjs-webpack-plugin 在 plugins中声明 uglifyjs-webpack-plugin
打包之后的代码

!function(e){var t={};function r(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:n})},r.r=function(e){Object.defineProperty(e,"__esModule",{value:!0})},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="./dist/",r(r.s=0)}([function(e,t,r){"use strict";r.r(t),console.log("This is a")}]);

我们发现已经没有 方法b、和方法c了。

2：CSS的tree shaking

对于 css的tree shaking 我们则使用 purifycss-webpack 配合 glob-all来实现 。

npm i -D purifycss-webpack purify-css glob-all

我们在webpack.config.js中配置如下

var Purifycss = require('purifycss-webpack');
var glob = require('glob-all');

plugins: [
        new ExtractTextPlugin({
            filename: '[name].bundle.css',
        }),// ExtractTextWebpackPlugin 具体使用方法可以参考webpack官网
        new Purifycss({
            paths: glob.sync([
                path.join(__dirname, './*.html'),
            ])
        })
    ]

修改 index.html 内容为

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./dist/app.bundle.css">
</head>
<body>
        <div class="box"></div>
</body>
</html>

style.css内容为

.box {
    width: 200px;
    height: 200px;
    background-color: aqua;
    transition: transform 1s;
}

.big-box {
    width: 500px;
    height: 500px;
    background-color: aqua;
    transition: transform 1s;
}

.samll-box {
    width: 100px;
    height: 100px;
    background-color: aqua;
    transition: transform 1s;
}

打包结果

.box {
  width: 200px;
  height: 200px;
  background-color: aqua;
  transition: -webkit-transform 1s;
  transition: transform 1s;
  transition: transform 1s, -webkit-transform 1s;
}