首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    通过Scope Hoisting优化Webpack输出

    本文作者:IMWeb 吴浩麟 原文出处:IMWeb社区 未经同意,禁止转载 Scope Hoisting 可以让 Webpack 打包出来的代码文件更小、运行的更快, 它又译作 "作用域提升"...单从名字上看不出 Scope Hoisting 到底做了什么,下面来详细介绍它。...认识 Scope Hoisting 让我们先来看看在没有 Scope Hoisting 之前 Webpack 的打包方式。...由于 Scope Hoisting 需要分析出模块之间的依赖关系,因此源码必须采用 ES6 模块化语句,不然它将无法生效。 原因和4-10 使用 TreeShaking 中介绍的类似。...使用 Scope Hoisting 要在 Webpack 中使用 Scope Hoisting 非常简单,因为这是 Webpack 内置的功能,只需要配置一个插件,相关代码如下: const ModuleConcatenationPlugin

    76420

    Webpack 性能系列五:使用 Scope Hoisting

    一、什么是 Scope Hoisting 默认情况下,经过 Webpack 打包后的模块资源会被组织成一个个函数形式,例如: 关于打包产物形态的更多知识,可参考前文《Webpack 原理系列八:产物转译打包逻辑...例如上述示例经过 Scope Hoisting 优化后,生成代码: ((__unused_webpack_module, __webpack_exports__, __webpack_require__.../src/index.js console.log(common); }) 二、使用 Scope Hoisting 2.1 开启 Scope Hoisting 特性 Webpack 提供了三种方法开启...,导致 Scope Hoisting 失效,例如: // common.js module.exports = 'common'; // index.js import common from '..../common'; 上例中,由于 common.js 使用 CommonJS 导入模块内容,Scope Hoisting 失效,两个模块无法合并。

    1.4K10

    【Webpack】654- 了不起的 Webpack Scope Hoisting 学习指南

    一、什么是 Scope Hoisting Scope Hoisting 是 webpack3 的新功能,直译为 "「作用域提升」",它可以让 webpack 打包出来的「代码文件更小」,「运行更快」。...三、Scope Hoisting 原理 Scope Hoisting 的实现原理其实很简单:分析出模块之间的依赖关系,尽可能将打散的模块合并到一个函数中,前提是不能造成代码冗余。...四、Scope Hoisting 使用方式 1. 自动启用 在 webpack 的 mode 设置为 production 时,会默认自动启用 Scope Hooting。...Hoisting,它对我们项目优化非常有帮助,但平常又很少会去注意。...六、参考文章 《通过Scope Hoisting优化Webpack输出》 《webpack 的 scope hoisting 是什么?》

    1.1K20
    领券