score:7
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.
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.
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.
score:1
you can create your own version by following the documentation in the official jquery repository here: https://github.com/jquery/jquery#how-to-build-your-own-jquery, but i have to say that i haven't been able to adapt those steps to my setup and also it involved using grunt which is not part of our tool belt.
however i have found a very good github gist explaining how to do it only using webpack: https://gist.github.com/rhaglennydd/abb2d27144e1a595e7c850b0a7611a21.
i think that a link only answer breaks some of the rules in so, so i'm giving a short description.
1. install jquery throught npm
npm install jquery
2. copy the exported code
copy the code from node_modules/jquery/src/jquery.js
to a file in your project (ex. code/resources/js/jquery
)
3. edit the path to source files
the imported files must be the original files in the node_modules
folder.
for example './core',
can become '../../../node_modules/jquery/src/core'
.
4. remove the modules that you don't need
remove or comment some modules: be sure to test that your code keeps working without raising errors.
5. add your custom jquery as an alias in the webpack configuration
this will tell webpack to use your version whenever jquery
is needed in your code or in one of your dependencies.
for example:
module.exports = {
resolve: {
alias: {
jquery: `${environment.paths.source}/js/jquery-custom/jquery-custom.js`,
}
}
};
final word
i have seen that if i remove a lot of modules the size will reduce, but if you don't it can even slightly increase: so this is a good strategy if you need to progressively remove some code or if you already use very little modules, otherwise you'd better stick to the original or find an alternative library.
Source: stackoverflow.com
Related Query
- Is Webpack smart enough to make jQuery lighter?
- How can I make a component smart enough to know about a function that could have come from one of many sources?
- How to make the webpack dev server run on port 80 and on 0.0.0.0 to make it publicly accessible?
- How to make IntelliJ IDEA resolve webpack requires out of node_modules directory?
- how to make webpack typescript react webpack-dev-server configuration for auto building and reloading page
- How to make webpack not use the window object when bundling?
- Make all images file point to CDN using Webpack
- Is implementing toJSON() method enough to make any class instance serializable?
- How to make tsconfig work with webpack provide plugin?
- Make table columns resizable with jQuery plugin
- Make webpack ignore a certain import
- Globally add $ jquery in webpack
- How to make a webpack library that can be consumed in React Application?
- Trigger event via jQuery in webpack and handled on page
- React with Webpack + Jquery + bootstrap
- How to make browserHistory work with webpack react
- Django Webpack compiling misc JS in brand new Django/ReactJS app to make 21,500 line file
- Using jQuery UI with React.js and Webpack
- How to make scroll work from jquery to React js
- Make the Webpack React Fast Refresh plugin ignore linting errors
- importing 3rd party library with webpack that uses jQuery and Bootstrap
- Would like to make sure the lifecycle of React and usage of jQuery datatable with React
- How to make lightslider jquery plugin work in a reactjs component?
- Make webpack download react from cdn?
- how do I make webpack not convert process.env variables to their values during build?
- webpack with react-bootstrap-table getting error jQuery not found
- How to make webpack bundle my assets/image/ although i call them from a url, into the component
- Webpack and Karma Testing: Uncaught ReferenceError: jQuery is not defined using
- where is create-react-app webpack config and files?
- Make React useEffect hook not run on initial render
More Query from same tag
- Caching props in getDefaultProps an anti-pattern in React?
- Toggle event click (open/close) in React
- Clear input form after submitting in React/Redux
- Theme css selectors with React JS/Polymer
- Webpack-dev-server showing directory list instead of the app page
- Where to calculate groups for fluentui detaillist in nextjs
- How to add zIndex in typescript
- TypeError: Failed to fetch in reactjs login page
- Gatsby's Client Side Routing - What Gatsby features do my client-rendered pages still benefit from?
- how to make google bots crawl my react website with dynamic urls and display them in google
- CSS: How to use psuedo-class to color span element
- How to hide an AntD message after another Promise (API request) completes?
- React : cannot add property 'X', object is not extensible
- Customize material UI Switch when checked and disabled
- Divergent chart possible with Highcharts?
- react hook based on other hooks' result
- How to remove item from array stored in localstorage if the item already exists and changing state of button
- Module not found: Error: Can't resolve 'zlib'
- Load Images in map function dynamic
- Download file after secure link has been returned
- Assertion on mocked function is failing
- Getting Redux DevTools To Work
- How to dynamically add the valueOptions of a singleSelect column in Material-UI's DataGrid?
- Facebook pixel in Gatsby js/ React js
- React does not export its components via ES6 so IntelliJ throws warnings
- How to refactor React mousemove Class to functional Component?
- React: Function not reading updated global variable
- How to modify DOM in React - typescript - Styled-components app with click event?
- Controlled input changing on setState()
- React action with data in map