性能优化篇---Webpack构建代码质量压缩(4)

接入treeShaking，剔除无用代码

•  Tree Shaking可以用来找出有用代码，，去除JavaScript中用不上的死代码；但是它依赖于ES6静态花模块语法import\export的导入和导出
•  webpack接入

1.  修改.babelrc保留ES6模块话语句

•  注意新版本babel-preset-env已经预设babel-preset-es2015,babel推荐使用babel-preset-env取代babel-preset-es2015，并且继续使用babel-preset-es2015会发出警告信息。 

{  
  "presets": [  
    ["env", {  
      "modules": false  
    }]  
  ],  
  "plugins": ["syntax-dynamic-import"]  
} 

•  webpack --display-used-exports运行构建带上--display-used-exports可追踪到Tree Shaking的工作；
•  Webpack只能正确的分析出如何剔除死代码，需要接入UglifyJs处理剔除（配置见上）

开启Scope Hoistion

•  scope hoisting即作用域提升;
•  在构建过程中，webpack会借助ES6 模块化的静态特性，确定模块的依赖关系，将一个bundle中的静态依赖提升到顶部。（所以需要和接入treeShaking一样配置Babel开启ES6模块化）
•  原理：分析模块间的依赖关系，尽可能的将零散的模块合并到一个函数中去，前提不能造成代码冗余，因此只有被引用了一次的模块才能被合并。
•  接入好处：

        1.代码体积减少

        2.代码在运行时因为创建的函数作用域更少了，内存开销也随之变小

•  webpack接入ModuleConcatenationPlugin内置插件 

const ModuleConcatPlugin = require('webpack/lib/optimize/ModuleConcatenationPlugin');  
plugins: [  
     new ModuleConcatPlugin(), //开启scope Hoisting  
 ], 

（编辑：ASP站长网）