Webpack性能优化之Scope Hoisting

Scope Hoisting是webpack的性能优化技术之一，主要目的是减少 js 代码的体积，提高运行时的性能。具体来说，Scope Hoisting 将模块之间的作用域关系进行优化，将多个模块中的作用域合并成一个，从而减少了函数声明，最终减小了代码体积。

例如

//sum.jd
export default function sum(a, b) {
  return a + b;
}

//index.js
import sum from "./sum";

console.log(sum(1, 2));

没使用scope hoisting打包后的结果

使用scope hoisting，主要配置webpack.config.js，当然只要开启了production就会默认开启了这个功能

const webpack=require('webpack')
module.exports={
           ...
	plugins:[
		new webpack.optimize.ModuleConcatenationPlugin()
	]
        ....
}

查看打包后的结果

可以看到打包后的结果中sum的函数声明提升到了main的作用域中，相应的代码体积也变小了