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

Question

这是我的入口文件

/***
** 入口模块
***/
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吗？

Answer 1

Dell 2019-07-24 22:36:31

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

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