Webpack 是否足够智能，可以让 jQuery 更轻量? [英] Is Webpack smart enough to make jQuery lighter?

问题描述

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

I know it's a really simple question, but I haven't seen any straightforward question/answer like it. I'm trying to decide if jQuery is worth keeping in my react app, and I am using it almost entirely for ajax. Is webpack smart enough to only include the ajax portions of jQuery in the bundle?

推荐答案

不，即使你使用的是 Webpack 2(webpack 1 和之前的版本没有实现 tree-晃动；也就是说，整个模块都将包含在您的包中，而不仅仅是您导入的模块)这是因为 jquery 在 NPM 中是如何出售的:作为一个大型 jquery.js 模块.

No, webpack will not only include the ajax portions of jquery in your bundle, even if you are using Webpack 2 (webpack 1 and previous does not implement tree-shaking; that is, the entire module will be included in your bundle, not just those that you import) this is because of how jquery is vended in NPM: as one, large jquery.js module.

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

If you are intent on using jquery, there are ways to build jquery using only the ajax module, but this will require some manual effort (eg. you can't just do import {ajax} from 'jquery'). There is a babel plugin for lodash, which does vend each method in its own module so you don't have to include all of lodash in your webpack build. It is a babel plugin because it relies on the import { some_method } from 'library' syntax.

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

If you are looking for an easy ajax library, I highly recommend using isomorphic-fetch (which, in browsers, just uses 'whatwg-fetch'). It keeps your code very tidy.

这篇关于Webpack 是否足够智能，可以让 jQuery 更轻量?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！