webpack构建中tree shaking、scope Hoisting（面试题）

一、tree shaking （摇树优化）

tree shaking概念：

1个模块可能有多个方法，只要其中某个方法使用了，整个文件会被打到bundle中
tree shaking 只将用到的方法打到bundle中，没用的在uglify阶段被擦除

webpack默认支持，在.babelrc文件中设置 modules: false即可

production mode 下默认开启 tree shaking

必须是ES6语法

tree shaking原理：依赖于ES6 moudel特性

只能作为模块顶层的语句出现
import的模块名只能是字符串常量
import binding 是immutablede

`tree shaking副作用`

虽然生产模式下默认开启，但是由于经过 babel 编译全部模块被封装成 IIFE（立即执行函数）

IIFE 存在副作用无法被 tree-shaking 掉

需要配置 { module: false }和 sideEffects: false

rollup 和 webpack 的 shaking 程度不同，以一个 Class 为例子

1、擦除无用的js

没有设置前，只引入不调用，mode: 'none’时
只调用a，打包只打包对应的方法，mode: ‘production’

2、擦除无用的css

npm i purgecss-webpack-plugin -D

需要和 MiniCssExtractPlugin配合使用，将css提取为单独的文件

webpack.prod.js文件

  const PATH = {src: path.join(__dirname, './src')}new PurgecssPlugin({paths: glob.sync(`${PATH.src}/**/*`, {nodir: true})}),

二、scope Hoisting （作用域提升）

production mode默认开启 scope Hoisting
new webpack.optimize.ModuleConcatenationPlugin()插件

构建后的代码存在大量闭包代码
导致打包bundle体积变大，内存开销变大

原理：

将所有的模块的代码按照引用顺序放在一个函数作用域里，然后适当的重命名一些变量以防止变量名冲突

可以减少函数声明代码和内存开销

webpack构建中tree shaking、scope Hoisting（面试题）相关推荐

vue3中tree shaking特性
Treeshaking是一种通过清除多余代码方式来优化项目打包体积的技术专业术语叫 Dead code elimination 简单来讲,就是在保持代码运行结果不变的前提下,去除无用的代码如何做到 ...
webpack之Scope Hoisting
我们先来简单分析一下:(没有开启Scope Hoisting ) 现象:构建后的代码存在大量的闭包代码 [(function (module, __webpack_exports__, __webpa ...
Tree Shaking
文章目录前言一.Tree shaking 是什么? 二.webpack中 Tree shaking 的相关使用 1.添加一个通用模块 2.将文件标记为无副作用(side-effect-free) ...
demo10 关于JS Tree Shaking
1.什么是 tree shaking 借助于 es6 (es2015) 模块系统 (import 和 export) 的静态解析,webpack 能够利用 Tree Shaking 进行按需加载,移除 ...
Webpack之Tree Shaking与Scope Hoisting
Webpack之Tree Shaking与Scope Hoisting 一.Tree Shaking 二.webpack中使用Tree-shanking 三.Scope Hoisting 一.Tree ...
webpack中的tree shaking(树摇)-----移除未使用的代码
本篇大致概括一下tree shaking的作用以及与webpack相结合使用什么是tree shaking 引用webpack官网的原文来说: tree shaking 是一个术语,通常用于描述移除 ...
46 webpack优化- Scope Hoisting
Scope Hoisting Webpack构建出来的文件源码,比如演练是实战中的build.js里面的内容里面包含了大量的函数声明语句,其原因是项目中引用了许多模块,每一个模块都有自己的作用域,导致 ...
webpack学习(四) -- css tree shaking
css tree shaking 我们和webpack(三)一样,用案例说话安装css需要的两个loader,css-loader 和style-loader npm install css-loa ...
webpack 的 scope hoisting 是什么？
原文链接:https://ssshooter.com/2019-02... scope hoisting 是 webpack3 的新功能,直译过来就是「作用域提升」.熟悉 JavaScript 都应该 ...

webpack构建中tree shaking、scope Hoisting（面试题）

一、tree shaking （摇树优化）

`tree shaking副作用`

1、擦除无用的js

2、擦除无用的css

二、scope Hoisting （作用域提升）

webpack构建中tree shaking、scope Hoisting（面试题）相关推荐

最新文章

热门文章