webpack构建中tree shaking、scope Hoisting（面试题）_webpack tree-shaking babel module:false

一、tree shaking （摇树优化）

tree shaking概念：

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

• webpack默认支持，在.babelrc文件中设置 modules: false即可
• production mode 下默认开启 tree shaking
• 必须是ES6语法

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

1. 只能作为模块顶层的语句出现
2. import的模块名只能是字符串常量
3. 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})
    }),
1
2
3
4
5
6
7

二、scope Hoisting （作用域提升）

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

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

原理：

1. 将所有的模块的代码按照引用顺序放在一个函数作用域里，然后适当的重命名一些变量以防止变量名冲突
2. 可以减少函数声明代码和内存开销