性能优化——Tree-shaking 的使用

Tree-shaking 字面意思就是 摇晃树， 其实就是去除那些引用的但却没有使用的代码。
Tree-shaking 概念最早由Rollup.js 提出，后来在webpack2中被引入进来，但是这个这一特性能够被支持得益于ES6 modules的静态特性。ES6的模块声明相比于传统CommonJS的同步require有着本质区别。这种modules设计保证了依赖关系是提前确定的，使得静态分析成为了可能，与运行时无关。
并且webpack中并没有直接对tree shaking 的配置，需要借助uglifyjs-webpack-plugin
实例代码:

const UglifyJSPlugin = require('uglifyjs-webpack-plugin')
const path = require('path')

module.exports = {
  entry: './index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
    new UglifyJSPlugin()
  ]
}

记住，如果使用babel的话，需要关闭babel的modules配置

const UglifyJSPlugin = require('uglifyjs-webpack-plugin')
const path = require('path')

module.exports = {
  entry: './index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
    new UglifyJSPlugin()
  ]
}

“modules”: false 的含义是关闭 Babel 的模块转换功能，保留原本的 ES6 模块化语法。

参考指南
webpack tree-shaking
阮一峰 ES6 Modules
如何评价 Webpack 2 新引入的 Tree-shaking 代码优化技术？