Webpack is a bundler of components. It helps to bundles images, javascript, css into desired set of output
Apart from this Web pack helps to send parameters to javascript transformation to convert packages for production or development mode of components.
Sample:
Sample: https://github.com/hariram302/react-kickstart/blob/master/webpack.config.dev.js
Apart from this Web pack helps to send parameters to javascript transformation to convert packages for production or development mode of components.
Javascript Bundling
In a development environment, there will be lots of javascript file for each component or module. When we move those into production as is, it will have a performance impact. Browser can only make less than eight parallel connection or concurrent calls to a proxy/host. If we have more number of files that will result in delay in loading a page (after 8th request it waits for a request to be completed before it starts 9th requests).Style Bunding
sass-loader, less-loader, style-loader are used to transform sass/less/css files to css.
Sample:
{ test: /\.scss$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader!sass-loader") },
{ test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader") }
Extract Text Plugin is used here to keep the CSS output in a separate file. We can define those in plugins
plugins: [
new ExtractTextPlugin("css/sample.min.css"),
new webpack.optimize.UglifyJsPlugin({
output:{
beautify: false
}},
),
new webpack.NoErrorsPlugin()
],
React Transformation
Babel is used transform jsx to js.
{ test: /(\.js|\.jsx)$/, include: path.join(__dirname, 'client'), loader: 'babel', query: { presets: ["es2015", "react", 'stage-1'] } },
Presets here is the list of plugins babel supports for transformation currently babel has stage-3.
Recommendations
- Reduce the number of static files as much as possible on production environment. This can be easily achieved using WebPack
- Have static files on a separate web application than the actual application and set expiration of static files desired duration so that it
- Increase the parallel connection for application
- Take static files from cache
- Minfication of javascript helps to reduce the size of the javascript file. This can be done by Webpack.UglifyJSPlugin.
- Compress
- Mangle (Transform all local variables into character variables dynamically)
- Beautify (To reduce the white space)
- Comments (To remove/preserve comments)
- These are the option available in WebPack Uglify JS Plugin
- Images, Sprite-WebPack helps to create a sprite image from sets of images.
- Use CDN for common javascript packages like Bootstrap, jQuery
Sample: https://github.com/hariram302/react-kickstart/blob/master/webpack.config.dev.js
