tree-shaking

Tree-shaking的本质是消除无用的js代码。无用代码消除在广泛存在于传统的编程语言编译器中,编译器可以判断出某些代码根本不影响输出,然后消除这些代码,这个称之为DCE(dead code elimination)。

副作用意思是一个函数会、或者可能会对函数外部变量产生影响的行为。

生产环境源码一般要经过 babel 编译,但编译后,全部模块被封装成 IIFE。因为IIFE比较特殊,它在被翻译时(JS并非编译型的语言)就会被执行,Webpack不做程序流分析,它不知道IIFE会做什么特别的事情,所以不会删除这部分代码。而 rollup 做了程序流分析,会删除 IIFE 里没有副作用的代码。webpack 的 shaking 是模块级别的,而 rollup 可以做到语句级别。

webpack 开启 tree shaking

  1. 使用 ES2015 模块语法(即 import 和 export)。
  2. 在项目 package.json 文件中,添加一个 "sideEffects" 入口。
  3. 引入一个能够删除未引用代码(dead code)的压缩工具(minifier)(例如 UglifyJSPlugin)

你的Tree-Shaking并没什么卵用

Webpack Tree shaking 深入探究

加载原理

webpack 参照 commonJS 规范实现 exports 和 require,然后自动加载入口模块,控制缓存模块。

webpack对于es模块的实现,也是基于自己实现的__webpack_require____webpack_exports__ ,装换成类似于commonjs的形式。对于es模块和commonjs混用的情况,则需要通过__webpack_require__.n的形式做一层包装来实现。

webpack通过__webpack_require__.e函数实现了动态加载,再通过webpackJsonp函数实现异步加载回调,把模块内容以promise的方式暴露给调用方,从而实现了对code splitting的支持。

webpack模块化原理-commonjs

webpack模块化原理-ES module

webpack模块化原理-Code Splitting

性能优化

  1. 提高打包速度
    • 缩小文件的搜索范围,关键字resolve noParse include exclude
    • 减少基础模块的编译次数,关键字 DllPlugin
    • 多线程编译,关键字 happypack
  2. 减小打包体积
    • 压缩文件,关键字 UglifyJS
    • 剔除死代码,关键字 Tree Shaking
  3. 按需加载,关键字 Code Splitting

三十分钟掌握Webpack性能优化

编写插件

插件是由一个构造函数(此构造函数上的 prototype 对象具有 apply 方法)的所实例化出来的。这个 apply 方法在安装插件时,会被 webpack compiler 调用一次。apply 方法可以接收一个 webpack compiler 对象的引用,从而可以在回调函数中访问到 compiler 对象。插件就是在 compiler 对象的钩子回调里做逻辑操作。

webpack 文档-编写一个插件

HMR

Hot Module Replacement,简称HMR,无需完全刷新整个页面的同时,更新模块。HMR的好处,在日常开发工作中体会颇深:节省宝贵的开发时间、提升开发体验。HMR 与 live reload 是两个不同的概念。

  1. webpack-dev-server 监听文件系统变化,变化时,重新编译到内存中
  2. 通过 websocket,服务器推送给浏览器新模块的 hash 值
  3. 通过 websocket,服务器推送给浏览器新模块处于 ok 状态
  4. 处于浏览器的 webpack 客户端向服务器发起 jsonp 请求,拿回新模块代码
  5. 删除新模块,添加新模块,通过webpack_require执行相关模块的代码,完成模块的更新

Webpack HMR 原理解析

轻松理解webpack热更新原理

results matching ""

    No results matching ""