如何阻止Webpack移除仅由HTML按钮触发的未调用JS代码？

以下是几种有效阻止Webpack移除这类仅通过HTML按钮触发的函数的方法：

• 挂载函数到全局对象
  Webpack默认会隔离模块作用域，HTML中的按钮点击事件只能访问全局作用域的函数。将函数挂载到window对象上，Webpack会识别到它被外部引用，不会当作死代码移除：

function handleButtonClick() {
  console.log('按钮已点击');
}
// 挂载到全局
window.handleButtonClick = handleButtonClick;

• 导出并显式引用，配合保留注释
  如果采用模块化开发，先导出目标函数，在入口文件中引入后，通过注释告知Webpack保留该函数，再挂载到全局：

// 模块文件中导出函数
export function handleButtonClick() {
  console.log('按钮已点击');
}

// 入口文件main.js中引入并处理
import { handleButtonClick } from './your-module.js';
// 标记函数需保留
/* webpack: export const handleButtonClick = handleButtonClick */
window.handleButtonClick = handleButtonClick;

• 调整Webpack优化配置
  修改webpack.config.js中的优化选项，禁用usedExports（该选项负责标记未使用的导出），不过此方法会影响整体代码优化效率，按需使用：

module.exports = {
  // 其他配置...
  optimization: {
    usedExports: false,
    sideEffects: true // 若代码存在副作用，需设置为true避免误删
  }
};

• 标记函数为非纯函数
  如果函数包含DOM操作等副作用，使用注释标记它不是纯函数，Webpack就不会因为它未被内部调用而移除：

/*#__PURE__*/ false;
function handleButtonClick() {
  document.getElementById('demo').innerText = '点击完成';
}
window.handleButtonClick = handleButtonClick;

内容的提问来源于stack exchange，提问作者Irvin Widyastanto