老师设置了module.hot如果再设置tree shaking,tree shaking就不生效了?

来源:4-1 Tree Shaking 概念详解

慕斯0315010

2019-07-19

这是我的入口文件

/***
** 入口模块
***/
import { header } from './header.js';
import { Ccontent} from './content.js'
const fragment = document.createDocumentFragment();

fragment.append(header);
fragment.append(Ccontent());
if (module.hot) {
	module.hot.accept('./content.js',() => {
		let ch = document.getElementById('cc');
		document.body.removeChild(ch);
		console.log(Ccontent())
		document.body.append(Ccontent());
	})
}
document.body.append(fragment);

/***
** 被引用的模块
***/
function Ccontent () {
	const content = document.createElement('div');
	content.setAttribute('id','cc');
	content.innerHTML = '我是contsssst';
	return content
}

function sayHi() {
	console.log('你好');
}

export {
	Ccontent,
	sayHi
}

  1. 我个人理解为使用了module.hot.accept函数监听content模块的变化,他的参数是一个回调函数,而回调函数是一个异步操作,而tree shaking不支持异步调用模块,所以tree shaking打包失效。
  2. 如果以上是对的话我想问一下原理,hot文档描述accept所有引用依赖模块(dependencies)的导入符号都会被自动更新 这句话是指我的content模块相当于被重新引入,然后accept函数自动帮我解构出Ccontent,sayHi吗?
写回答

1回答

Dell

2019-07-24

  1. 异步代码目前webpack确实不支持tree shaking

  2. 是这么回事儿,底层是通过websocket实现的通信

0
0

从基础到实战 手把手带你掌握新版Webpack4.0

知识点+项目实例+原理讲解 全方位解析Webpack4新版本

3627 学习 · 1291 问题

查看课程