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

接入treeShaking，剔除无用代码

•  Tree Shaking可以用来找出有效代码，，去除JavaScript顶用不上的死代码；可是它依靠于ES6静态花模块语法importexport的导入和导出
•  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  
 ], 

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!