Webpack 是否足够智能,可以让 jQuery 更轻量?

IT技术 jquery reactjs webpack
2021-05-13 15:29:22

我知道这是一个非常简单的问题,但我还没有看到任何类似的简单问题/答案。我正在尝试确定 jQuery 是否值得保留在我的 React 应用程序中,并且我几乎完全将它用于 ajax。webpack 是否足够智能,只在包中包含 jQuery 的 ajax 部分?

2个回答

不,即使您使用的是 Webpack 2(webpack 1 和之前的版本没有实现摇树;也就是说,整个module都将包含在您的包中,而不仅仅是包中)那些你导入的)这是因为 jquery 在 NPM 中是如何出售的:作为一个大型 jquery.js module。

如果您打算使用 jquery,有一些方法可以仅使用 ajax module来构建 jquery,但这需要一些手动操作(例如,您不能只是这样做import {ajax} from 'jquery')。有一个 lodash 的 babel 插件,它在自己的module中提供每个方法,所以你不必在你的 webpack 构建中包含所有的 lodash。它是一个 babel 插件,因为它依赖于import { some_method } from 'library'语法。

如果您正在寻找一个简单的 ajax 库,我强烈建议您使用isomorphic-fetch(在浏览器中,它只使用 'whatwg-fetch')。它使您的代码非常整洁。

您可以按照此处官方 jQuery 存储库中的文档创建自己的版本:https : //github.com/jquery/jquery#how-to-build-your-own-jquery,但我不得不说我没有无法使这些步骤适应我的设置,并且还涉及使用 Grunt,它不是我们工具带的一部分。

但是我发现了一个非常好的 Github Gist 解释了如何只使用 Webpack 来做到这一点:https ://gist.github.com/rhaglennydd/abb2d27144e1a595e7c850b0a7611a21

我认为链接只回答违反了 SO 中的一些规则,所以我给出了一个简短的描述。

1. 通过 npm 安装 jQuery

npm install jquery

2.复制导出的代码

将代码复制node_modules/jquery/src/jquery.js到项目中的文件中(例如code/resources/js/jquery

3.编辑源文件路径

导入的文件必须是文件node_modules夹中的原始文件例如'./core',可以成为'../../../node_modules/jquery/src/core'.

4. 删除不需要的module

删除或注释一些module:确保测试您的代码是否继续工作而不会引发错误。

5. 在 Webpack 配置中添加自定义 jQuery 作为别名

这将告诉 Webpackjquery在您的代码或依赖项之一需要时使用您的版本例如:

module.exports = {
  resolve: {
    alias: {
      jquery: `${environment.paths.source}/js/jquery-custom/jquery-custom.js`,
    }
  }
};

最后一句话

我已经看到,如果我删除很多module,大小会减小,但如果不这样做,它甚至会略微增加:因此,如果您需要逐步删除一些代码或者您已经使用了很少的module,这是一个很好的策略,否则你最好坚持原来的或寻找替代库。