Scope Hoisting

Webpack构建出来的文件源码，比如演练是实战中的build.js里面的内容里面包含了大量的函数声明语句，其原因是项目中引用了许多模块，每一个模块都有自己的作用域，导致了代码体积变大，内存开销也较大（函数作用域会消耗内存）。幸运的是Webpack使用Scope Hoisting技术解决了这个问题。

Scope Hoisting可以分析模块之间的依赖关系，最大程度地把零散的模块合并到一个函数中去，如此以来减少了函数声明代码，从而使得输出代码体积更小，内存的开销也变小了。

在mode为production也就是生产环境的时候，Scope Hoisting是默认集成的，如果想再其他环境使用，需要自己进行配置。

要使用Scope Hoisting需保证项目源码采用ES6模块化语法，因此需要修改resolve里面的mainFields配置如下：

resolve: {// 根据9.1.2进行优化modules: [path.resolve(__dirname, '../node_modules')],// 根据 9.12进行优化mainFields: ['jsnext:main', 'main'],// 根据9.1.3进行优化alias: {'@utils': path.resolve(__dirname, '../src/utils'),}
}

这样一来，如果你使用的第三方库提供了ES6模块化的代码，那么就会优先使用ES6模块代码（jsnext:main表示ES6模块化代码的入口），还需要在Plugins中使用如下插件：

plugins: [// 根据9.10进行优化 开启Scope Hoistingnew webpack.optimize.ModuleConcatenationPlugin(),new HtmlwebpackPlugin({// 使用的文件模板template: path.resolve(__dirname, '../src/main/index.html'),// 输出文件名称filename: 'index.html',// 设置页面窗口显示的titletitle: '演练实战'}),// 每次构建，清除上一次构建的内容new CleanwebpackPlugin(),// 根据9.7.1进行优化new MiniCssExtractPlugin({filename: 'css/[name].[hash:5].css',chunkFilename: '[id].css',}),
]

46 webpack优化- Scope Hoisting相关推荐

webpack 的 scope hoisting 是什么？
原文链接:https://ssshooter.com/2019-02... scope hoisting 是 webpack3 的新功能,直译过来就是「作用域提升」.熟悉 JavaScript 都应该 ...
webpack之Scope Hoisting
我们先来简单分析一下:(没有开启Scope Hoisting ) 现象:构建后的代码存在大量的闭包代码 [(function (module, __webpack_exports__, __webpa ...
webpack构建中tree shaking、scope Hoisting（面试题）
一.tree shaking (摇树优化) tree shaking概念: 1个模块可能有多个方法,只要其中某个方法使用了,整个文件会被打到bundle中 tree shaking 只将用到的方法打到 ...
Webpack之Tree Shaking与Scope Hoisting
Webpack之Tree Shaking与Scope Hoisting 一.Tree Shaking 二.webpack中使用Tree-shanking 三.Scope Hoisting 一.Tree ...
webpack5 基础配置（性能优化）12 DLL Terser Scope Hoisting
认识DLL库(了解) DLL全称是动态链接库,是为软件在winodw种实现共享函数库的一种实现方式,而Webpack也内置了DLL的功能,为的就是可以共享,不经常改变的代码,抽成一个共享的库.这个库 ...
webpack优化相关操作
1.缩小文件搜索的范围 • 优化loader配置尽量精确使用 include 只命中需要的文件. module.exports = { module: { rul ...
前端工程化之Webpack优化
你能所学到的知识点 1.Webpack Loader 和 Plugin 的区别 2.Webpack 生命周期 3.Webpack编译阶段提效 1.减少执行编译的模块 2.提升单个模块构建的速度 3.并 ...
Scope Hoisting（范围提升）
Scope Hoisting(范围提升) 什么是Scope Hoisting呢? Scope Hoisting从webpack3开始增加的一个新功能: 功能是对作用域进行提升,并且让webpack打包 ...
wepack scope hoisting
背景有一次在使用webpack构建组件项目时,需要动态指定publicpath,类似如下的代码: 构建后,在运行态下,发现模块A中,并没有应用动态指定的publicPath.查看了构建后的资源: 可 ...

46 webpack优化- Scope Hoisting

Scope Hoisting

46 webpack优化- Scope Hoisting相关推荐

最新文章

热门文章