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

Posted 2023-02-22

【中文标题】带有延迟加载问题的 webpack 树抖动

【英文标题】：webpack tree shaking with Lazy loading question

【发布时间】：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 包和特定于页面的包，然后链接到另一个页面。