简介

什么是Scope Hoisting

  • 是webpack3开始增加的一个新功能
  • 功能是对作用于进行提升,并且让webpack打包后的代码更小、运行的更快

默认情况下webpack打包会有很多的函数作用域，包括一些IIFE

  • 无论是从最开始的代码运行，还是加载一个模块，都需要执行一些列的函数
  • Scope Hoisting 可以将函数合并到一个模块中来运行

    如何使用

使用Scope Hoisting非常的简单，webpack内置

  • 在production模式下。默认这个模块就会启动
    • optimization.ModuleConcatenationPlugin
  • 在development模式下。我们需要自己来打开这个模块
    • optimization.ModuleConcatenationPlugin = true
    • new webpoack.optimize.ModuleConcatenationPlugin()

      production

      自动开启

      develepment

      ```typescript // webpack 自带 module.exports = { //… // 第一种开启的办法 optimization: { concatenateModules: true, }, };

// 第二种开启的办法 // 自己手动开始 plugins:[ new webpoack.optimize.ModuleConcatenationPlugin() ] ```