什么是范围吊装

范围提升会分析出模块之间的依赖关系，解决的预算把出来的模块合并到一个函数中去。比如我们备份两个文件

// test.js
export const a = 1;
// index.js
import { a } from "./test.js";

针对这种情况，我们预留出来的代码会类似这样

[
  /* 0 */
  function (module, exports, require) {
    //...
  },
  /* 1 */
  function (module, exports, require) {
    //...
  },
];

但是如果我们使用 Scope Hoisting 的话，代码就会解答到一个函数中去，于是就变成了这样的类似代码

[
  /* 0 */
  function (module, exports, require) {
    //...
  },
];

这样的资源共享方式生成的代码明显比少了多了。如果之前在Webpack4中你希望开启这个功能，只需要启用optimization.concatenateModules就可以了。

module.exports = {
  optimization: {
    concatenateModules: true,
  },
};

摇树

Tree Shaking 可以实现删除项目中引用的代码，比如

// test.js
export const a = 1;
export const b = 2;
// index.js
import { a } from "./test.js";

对于以上情况，测试文件中的变量b如果没有在项目中使用到的话，就不会被压缩到文件中。

如果你使用 Webpack 4 的话，开启生产环境就会自动启动这个优化功能。