webpack - Tree Shaking

tree shaking 是一个术语，通常用于描述移除 JavaScript 上下文中的未引用代码(dead-code)。它依赖于 ES2015 模块系统中的静态结构特性，例如 import 和 export。这个术语和概念实际上是兴起于 ES2015 模块打包工具 rollup。
日常开发经常需要引用各种库，但大多时候仅仅使用了这些库的某些部分，并非需要全部，此时Tree-Shaking如果能帮助我们删除掉没有使用的代码，将会大大缩减打包后的代码量。

tree shaking局限性：
（1）只能是静态声明和引用的ES6模块，不能是动态引入和声明的；而CommonJS模块支持动态结构的，所以不能对CommonJS模块进行tree-shaking处理。

JS Tree Shaking
Webpack.optimize.UglifyJsPlugin() //移除废弃代码
使用场景
常规优化
引入第三方库的某一个功能

//安装插件
npm install uglifyjs-webpack-plugin --save-dev

//webpcak.config.js
var UglifyJsPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
...
//压缩js
     optimization: {
        minimizer: [
            new UglifyJsPlugin({
                uglifyOptions: {
                    compress: false
                }
            })
        ]
    },
};

//app.js
import { a,b } from './common/util'
console.log(a());
console.log(b());

import { chunk } from 'lodash-es'
console.log(chunk([1,2,3,4,5,6,],2))

Lodash Tree shaking解决方案
lodash //Not working
lodash-es //如何还是不行的话，安装下面这个
Babel-plugin-lodash

如果在生产环境下，是没有办法做 tree-shaking 的，这个可能也是 webpack 提升生产环境下构建速度的一种手段。webpack 命令可以tree-shaking，npm run dev 命令不能tree-shaking，亲自测试过。

CSS Tree Shaking
Purify CSS
https://github.com/purifycss/purifycss
purifycss-webpack //针对webpack的插件
options
paths:glob.sync([]) //用于处理多路径文件，使用purifycss的时候要用到glob.sync方法。

//安装插件
npm install purifycss-webpack glob-all purify-css --save-dev

//webpack.config.js
var PurifyCss = require('purifycss-webpack');
var glob = require('glob-all');  

plugins:[
        new ExtractTextWebpackPlugin({
            filename:'[name].min.css',   //提取后css文件名
            allChunks:false
        }),
        new PurifyCss({
            paths:glob.sync([
                path.join(__dirname,'./*.html'),
                path.join(__dirname,'./src/*.js')
            ])
        })
    ]