带有延迟加载问题的 webpack 树抖动答案

【问题标题】：webpack tree shaking with Lazy loading question带有延迟加载问题的 webpack 树抖动
【发布时间】：2021-04-20 09:34:31
【问题描述】：

所有，我是 Webpack 的新手。目前，我面临一个关于 webpack 摇树的问题。在 CommonJS 中，由于 require 语法，webpack 无法进行树摇动。例如，程序可以通过以下方式导入包，但无法进行 tree-shaking，

var a;
if(condition){
    a = require('module1');
}else{
    a = require('module2');
}

那么，tree shaking 是基于 ES6 模块中的 import 静态语法，无法动态导入包。

然而，在 es7 中，有一种动态方式通过 延迟加载 import (module) 加载模块。所以，我的问题是，如果程序包含延迟加载语法，tree shaking 是否仍然有效，如果 webpack 可以做到这一点，这是如何实现的？

【问题讨论】：

【解决方案1】：

据我所知，没有编译器/捆绑器支持 tree shaking 动态导入的模块。 Webpack 5 在删除动态加载的包中未使用的代码方面可能会稍好一些。

但是你可以用旧的方式来做；创建两个 html 站点，共享一个 JS 包和特定于页面的包，然后链接到另一个页面。

【讨论】：