I'm using WebPack CommonsChunkPlugin to extract duplicate code and reduce JavaScript code size. I have two html pages and two entries for them. Also i've added ReactJs vendor entry. So far, in webpack.config.js we have:
var path = require("path");
var webpack = require('webpack');
var BundleTracker = require('webpack-bundle-tracker');
var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
context: __dirname,
entry: {
react: ["react", "react-dom"],
home: './assets/js/home.jsx',
about: './assets/js/about.jsx',
},
output: {
path: path.resolve('./assets/bundles/'),
filename: "[name].js",
},
plugins: [
new BundleTracker({filename: './webpack-stats.json'}),
new webpack.optimize.CommonsChunkPlugin({
name: 'react',
minChunks: Infinity
}),
new BundleAnalyzerPlugin(),
],
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
options: {
plugins: [["lodash", { "id": ["semantic-ui-react"] }]],
presets: ["es2015", "react"]
}
},
],
},
resolve: {
modules: ['node_modules', 'bower_components'],
extensions: ['*', '.js', '.jsx']
},
};
This configuration result with webpack-bundle-analyzer:
As you can see, there are some duplicate code, some in red area and some other in green area. I want to extract this js codes from home and about bundles into a separate bundle. To extract red area code, namely lodash library, i added these lines to webpack config:
new webpack.optimize.CommonsChunkPlugin({
name: 'lodash',
minChunks: function(module, count) {
return module.context.indexOf('node_modules/lodash') >= 0;
}
}),
But it's not working as expected and lodash library code is still in both home and about bundles, also webpack creates a bundle named lodash that is almost empty and contains no js library.
Any idea on how to fix it ? How about extracting green are codes?
Your problem is that your are importing third party libs in each .js/.jsx file without importing it previously in a common file (normally called vendor.js).
If you have this file that import all you dependencies and you include it as entry and to CommonsChunkPlugin, webpack won't include again your libs in your final bundles (home.js and about.js). The technique is called code splitting in webpack docs.
vendor.js (or a name that fit for your case)
import 'react';
import 'react-dom';
import 'lodash';
import 'semantic-ui-react';
//... all your npm packages
webpack.config.js
var webpack = require('webpack');
var path = require('path');
module.exports = {
context: __dirname,
entry: {
vendor: './assets/js/vendor.js,
home: './assets/js/home.jsx',
about: './assets/js/about.jsx',
},
output: {
path: path.resolve('./assets/bundles/'),
filename: '[name].js',
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
minChunks: Infinity
}),
],
//Rest of Your config ...
};
index.html
<body>
<!-- AFTER YOUR HTML CODE -->
<script type="text/javascript" src="/assets/bundles/vendor.js"></script>
<script type="text/javascript" src="/assets/bundles/home.js"></script>
<script type="text/javascript" src="/assets/bundles/about.js"></script>
</body>
Check webpack code splitting docs:
Old docs: https://webpack.github.io/docs/code-splitting.html#split-app-and-vendor-code
New Docs: https://webpack.js.org/plugins/commons-chunk-plugin/#explicit-vendor-chunk
I managed to solve the problem by adding a common chunk to plugins. So final webpack config is :
var path = require("path");
var webpack = require('webpack');
var BundleTracker = require('webpack-bundle-tracker');
module.exports = {
context: __dirname,
entry: {
react: ["react", "react-dom"],
home: './assets/js/home.jsx',
about: './assets/js/about.jsx',
},
output: {
path: path.resolve('./assets/bundles/'),
filename: "[name].js",
},
plugins: [
new BundleTracker({filename: './webpack-stats.json'}),
new webpack.optimize.CommonsChunkPlugin({
name: 'react',
filename: '[name].js',
minChunks: Infinity,
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'common',
chunks: ['home', 'about'],
filename: '[name].js',
}),
],
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
options: {
plugins: [
["lodash", { "id": ["semantic-ui-react"] }]
],
presets: ["es2015", "react"]
}
},
],
},
resolve: {
modules: ['node_modules', 'bower_components'],
extensions: ['*', '.js', '.jsx']
},
};
And now bundle analyzer output is like this:
As it's shown in the picture, common semantic-ui-react and lodash libraries are now just in common bundle and not duplicated anymore.
Related
I'm working on a React project that gets served by a Go application.
I've been trying to integrate a component library, first with Ant Design, and now with Material UI.
In both instances, as soon as I add a simple component (in this case a Button), my webpack bundle throws net::ERR_CONTENT_LENGTH_MISMATCH in Chrome.
Before adding a component library, my outputted bundle is around 1mb, when adding Material it grows to about 5.5mb, with Ant it was about 11mb.
The strange behavior is that this only happens when I bundle the resources in the development mode configuration with Webpack. If I build for production, everything is fine, although I do get the warning about the bundle size exceeding the recommended limit.
My webpack looks like this:
const path = require("path");
const webpack = require("webpack");
const dotenv = require("dotenv-webpack");
const miniCSS = require("mini-css-extract-plugin");
const CopyPlugin = require("copy-webpack-plugin");
module.exports = {
entry: path.resolve(__dirname, "src/index.tsx"),
output: {
path: path.resolve(__dirname, "dist"),
filename: "js/anx.js",
},
// Enable sourcemaps for debugging webpack's output.
devtool: "source-map",
resolve: {
// Add '.ts' and '.tsx' as resolvable extensions.
extensions: [".ts", ".tsx", ".js"],
alias: {
components: path.resolve(__dirname, "src/components"),
containers: path.resolve(__dirname, "src/containers"),
src: path.resolve(__dirname, "src"),
},
},
plugins: [
new miniCSS({
filename: "css/anx.css",
}),
],
module: {
rules: [
{
test: /\.ts(x?)$/,
exclude: /node_modules/,
use: [
{
loader: "ts-loader",
},
],
},
{
test: /\.css$/,
exclude: /node_modules/,
use: [
{
loader: miniCSS.loader,
options: {
publicPath: "/dist/css",
},
},
"css-loader",
],
},
{
test: /\.s[ac]ss$/,
use: [
{
loader: miniCSS.loader,
options: {
publicPath: "/dist/css",
},
},
"css-loader",
"sass-loader",
],
},
// All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
{
enforce: "pre",
test: /\.js$/,
loader: "source-map-loader",
},
],
},
// When importing a module whose path matches one of the following, just
// assume a corresponding global variable exists and use that instead.
// This is important because it allows us to avoid bundling all of our
// dependencies, which allows browsers to cache those libraries between builds.
externals: {
react: "React",
"react-dom": "ReactDOM",
},
};
if (process.env.NODE_ENV === "production") {
module.exports.devtool = "source-map";
module.exports.mode = "production";
module.exports.optimization = { minimize: true };
module.exports.plugins = (module.exports.plugins || []).concat([
new CopyPlugin([
{
from: "node_modules/react/umd/react.production.min.js",
to: "js/react.js",
},
{
from: "node_modules/react-dom/umd/react-dom.production.min.js",
to: "js/react-dom.js",
},
]),
new webpack.DefinePlugin({
"process.env": {
NODE_ENV: '"production"',
},
}),
new webpack.LoaderOptionsPlugin({
minimize: true,
}),
]);
} else {
module.exports.devtool = "eval-source-map";
module.exports.mode = "development";
module.exports.plugins = (module.exports.plugins || []).concat([
new CopyPlugin([
{
from: "node_modules/react/umd/react.development.js",
to: "js/react.js",
},
{
from: "node_modules/react-dom/umd/react-dom.development.js",
to: "js/react-dom.js",
},
]),
new dotenv({ path: "secrets/.env.dev" }),
]);
}
I suspect that, in development mode, Webpack includes the source maps and the bundle balloons in size, and this somehow results in the content mismatch error. However, I'm not totally sure. Any help would be appreciated
edit: I found a working solution for this by replacing eval-source-map with source-map in the development environments devtool. I'm not totally sure why this works; my suspicion is that it has something to do with my project running on WSL and the bundle sizes that are produced.
I have a react app that uses webpack to bundle JS and CSS into 1 file and output it into a destination folder. I've recently added toastr to 1 of my jsx file:
import toastr from "toastr";
import "toastr/build/toastr.min.css"
Running the app and viewing the source, i've verified in the browser (viewing the source files) that toastr.min.js is included in the JS bundle and toastr.min.css is included in the CSS bundle. However, the toastr notification doesn't show. There is no error and a scrollbar appears in the right-side for a few seconds so I suspected the toastr code is working, just that the CSS is not properly styling for some reason.
I removed this line:
import "toastr/build/toastr.min.css"
and then directly added this to html
<link rel="stylesheet" type="text/css" href="~/css/toastr.min.css" />
and now it works. But I want to make it work where toastr.min.css is included in the bundle. Is there anything I'm missing?
webpack config
const path = require("path");
const webpack = require("webpack");
const miniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
entry: {
home: "./Scripts/Components/Home/main.js",
login: "./Scripts/Components/Login/main.js",
vendor: [
"jquery",
"react",
"react-dom",
"react-router-dom",
"react-css-modules",
]
},
mode: "development",
optimization: {
splitChunks: {
cacheGroups: {
vendor: {
chunks: "all",
name: "vendor",
test: "vendor",
enforce: true
}
}
}
},
output: {
publicPath: "/js/",
path: path.join(__dirname, "/wwwroot/js/"),
filename: "[name].bundle.js"
},
devtool: "source-map",
plugins: [
new miniCssExtractPlugin({
filename: "../css/[name].css"
}),
],
module: {
rules: [{
test: /\.jsx$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: ["env", "react"]
}
}
}, {
test: /\.css$/,
use: [{
loader: miniCssExtractPlugin.loader,
}, {
loader: "css-loader",
query: {
modules: true,
localIdentName: "[name]__[local]___[hash:base64:5]"
}
}]
}]
}
};
I'm currently working on a project and i need to configure WebPack. In the project, we are also using ReactJS and Semantic-UI. Here is webpack.config.js :
var path = require("path");
var webpack = require('webpack');
var BundleTracker = require('webpack-bundle-tracker');
var BundleAnalyzer = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
context: __dirname,
entry: {
react: ["react", "react-dom"],
home: './assets/js/index.jsx',
},
output: {
path: path.resolve('./assets/bundles/'),
filename: "[name].js",
},
plugins: [
new BundleTracker({filename: './webpack-stats.json'}),
new webpack.optimize.CommonsChunkPlugin({
names: ["react"],
}),
new webpack.optimize.CommonsChunkPlugin({
name: "home",
chunks: ['home'],
filename: "[name]-[hash].js",
}),
new BundleAnalyzer(),
],
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
options: { presets: ["es2015", "react"] }
},
],
},
resolve: {
modules: ['node_modules', 'bower_components'],
extensions: ['*', '.js', '.jsx']
},
};
In assets/js/index.jsx file, we just have these import statements :
import React from "react";
import ReactDOM from 'react-dom';
import { Button } from 'semantic-ui-react';
By running webpack command, it outputs two files:
react.js: 779 KB
home-[some_hash_number].js: 1.5 MB
Using webpack-bundle-analyzer plugin, we get this:
As you see the red rectangle in the picture, all of the semantic-ui react components are bundled into home.js file although i just imported Button component from in assets/js/index.js file and that's why the output file gets too big.
Is there any way to just bundle needed components?
UPDATE
Reading #Alexander Fedyashov answer, i installed babel-plugin-lodash and updated webpack.config.js accordingly:
var path = require("path");
var webpack = require('webpack');
var BundleTracker = require('webpack-bundle-tracker');
var BundleAnalyzer = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
context: __dirname,
entry: {
react: ["react", "react-dom"],
home: './assets/js/index.jsx',
},
output: {
path: path.resolve('./assets/bundles/'),
filename: "[name].js",
},
plugins: [
new BundleTracker({filename: './webpack-stats.json'}),
new webpack.optimize.CommonsChunkPlugin({
name: "react",
}),
new webpack.optimize.CommonsChunkPlugin({
name: "home",
chunks: ['home'],
filename: "[name]-[hash].js",
}),
new BundleAnalyzer(),
],
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
options: {
plugins: ["lodash", { "id": ["lodash", "semantic-ui-react"] }],
presets: ["es2015", "react"],
}
},
],
},
resolve: {
modules: ['node_modules', 'bower_components'],
extensions: ['*', '.js', '.jsx']
},
};
Now everything is working and only needed components are loaded.
It should be splitted by Webpack, but in fact tree shaking doesn't work. You can use babel-plugin-lodash as described in SUIR docs.
You should keep in mind, that some of SUIR's components are dependent from each other, i.e.:
Button requires Icon and Label
Label requires Icon and Image
Image requires Dimmer
Dimmer requires Portal.
However, plugin will allow to strip such components as Rail, Reveal and Advertisement if you don't use them.
There is a new feature on Webpack 2 to solve this issue, read this article
https://medium.com/#adamrackis/vendor-and-code-splitting-in-webpack-2-6376358f1923
I recently had ensues with Webpack as I don't quite understand it and I need it for react and redux get working.
I successfully run webpack but I don't find the bundles .
I tried to use CommonsChunkPlugin() but nothing happens.
here is the webpack.config.js :
let path = require('path');
let webpack = require('webpack');
module.exports = {
entry: {
main: "./public/brain/main.brain.js",
index:"./public/brain/index.brain.js",
login: "./public/brain/login.brain.js",
register:"./public/brain/register.brain.js"
},
output: {
path: path.resolve(__dirname,"js"),
filename: "[name].nerve.js"
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: "bundle",
chunks: ["main","index", "login","register"]
}),
new webpack.optimize.CommonsChunkPlugin({
name: "nerve-users",
chunks: ["login", "register"]
}),
new webpack.optimize.CommonsChunkPlugin({
name: "nerve-index",
chunks: ["index"]
}),
],
module: {
loaders: [
{
test: /\.js$/,
loader: 'babel-loader',
query: {
presets: ['es2015', 'react' ,'env']
},
exclude: /node_modules/
}
]
},
stats: {
colors: true
},
devtool: 'source-map',
};
Cmd:
As the config suggests, your bundles will be saved inside a folder called 'js' with the following names:
main.nerve.js
index.nerve.js
login.nerve.js
register.nerve.js
I'm trying to setup a React project with react-css-modules, webpack and Hot Module Replacement. Everything is working like a charm but I can't get the CSS sourcemaps to work.
I followed this guide to make HMR work. It involves a BrowserSync setup to update the css file after Webpack writes it to disk.
I use (as suggested by react-css-modules) the ExtractTextPlugin to extract all of the css:
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract('style','css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!sass')
}
But if I change this to sourcemaps, as suggested here
loader: ExtractTextPlugin.extract('style', 'css?sourceMap!sass-loader outputStyle=expanded&sourceMap=true&sourceMapContents=true')
I get the error: "root" CSS module is undefined. in my browser console.
You can find my example repo here, but here's the full webpack config I'm using for development.
var webpack = require('webpack');
var path = require('path');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var WriteFilePlugin = require('write-file-webpack-plugin').default;
module.exports = {
entry: {
bundle: [
'webpack/hot/dev-server',
'webpack-hot-middleware/client',
'./index.js'
]
},
devtool: 'cheap-module-source-map',
debug: true,
devServer: devServer,
context: path.resolve(__dirname, './src'),
output: {
path: path.resolve(__dirname, './builds'),
filename: '[name].js',
publicPath: '/builds/'
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.OldWatchingPlugin(),
new WriteFilePlugin(),
new ExtractTextPlugin('[name].css', {
allChunks: true
})
],
module: {
loaders: [
{
test: /\.js$/,
loaders: ['react-hot', 'babel-loader'],
exclude: /node_modules/
},
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract('style','css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!sass')
}
]
},
resolve: {
extensions: ['', '.js', '.json']
}
};
How to make the sourcemap work?
Use this:
ExtractTextPlugin.extract('style','css?sourceMap&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!sass?sourceMap')
i.e. add the sourceMap param to both css & sass loaders. It said so in sass-loader docs.
This is how I have my css modules set up:
'css-loader?modules&sourceMap&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!',