Say I have multiple components that require the same SCSS file. When I am using webpack ExtractTextPlugin plugin I get output file with multiple duplications of the contents of this file. Is there a way to prevent extracting files that were already extracted in the output file? 👍 1
I think that you need the CommonsChunkPlugin
"The CommonsChunkPlugin is an opt-in feature that creates a separate file (known as a chunk), consisting of common modules shared between multiple entry points. By separating common modules from bundles, the resulting chunked file can be loaded once initially, and stored in cache for later use. This results in pagespeed optimizations as the browser can quickly serve the shared code from cache, rather than being forced to load a larger bundle whenever a new page is visited."
...
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: "commons",
filename: "commons.min.js",
minChunks: 2
})
]
...
Related
Currently we are bundling our backbone application into a single script.js file, using r.js (require.js optimizer)
Below is the build configuration file we are using for it
({
baseUrl: './',
mainConfigFile: 'require-config.js',
name: 'require-config',
out: 'scripts.js',
optimize: "uglify2",
optimizeCss: "standard",
removeCombined: true,
preserveLicenseComments: false,
include: "lib/require.min"
})
This makes script.js of 11.5 MB, which causes 45 - 60 seconds on the client side to download.
So we need to create multiple small bundles for the application
Solutions I had tried to achieve this:
Adding modules section in build configuration
Adding modules section in require-config file
Adding bundles section in require-config file
None of these solution gave the desired output, of breaking the application into multiple modules
Is there any better way to bundle javascript applications (which uses require.js) into multiple small modules
I have a large SPA which takes a second or two to load completely. What can I use to figure out what is causing my SPA to have a slow first load?
This is a video of the issue.
I have removed all calls to APIs. I've tried tools such as gatsby-plugin-webpack-bundle-analyser-v2, but I don't believe it's accurate. On gatsby build, it shows a bundle size of 10mb where the actual bundle .js file is only 2.3mb.
I can't figure out how to export a webpack-stats file to use https://chrisbateman.github.io/webpack-visualizer/.
If you want to export a stat file with gatsby-plugin-webpack-bundle-analyser-v2, you need to pass this option :
gatsby-config.js
{
resolve: 'gatsby-plugin-webpack-bundle-analyser-v2',
options: {
generateStatsFile: true,
},
},
It will generate JSON file named stats.json in your /public dir.
Hope this helps.
I want to add Less support to a React project. According to these links:
Adding SASS or LESS support to create-react-app
React + CSS Modules + LESS + Webpack 4
I ejected project and installed less and less-loader, but I can't find rules section in webpack.config.js.
Why my config file is not like the config file in these two pages? (webpack version is 4.1.0)
How can I add Less support to my project?
If I add
{
loader: require.resolve('less-loader'),
},
to file config, I'll get "Failed to compile" error
Cannot read property 'denominator' of undefined
in ...\node_modules\bootstrap\dist\css\bootstrap.css (line 2100, column 2)
Those tutorials are based on the old CRA, in the latest one they merged dev and prod files and did some additional mumbo jumbo to make it more "concise". One of those things was extracting CSS loaders into a standalone helper function - getStyleLoaders(). The rules section is below and the output of getStyleLoaders is merged onto it at an appropriate point.
In general what you are doing by appending your loader at the end of loaders array, is correct. And the error is not on the webpack side. It's rather thrown by less-loader not being able to interpret the file, because of invalid syntax inside.
For the context: I'm developing my own product using Symfony on the back-end and react/react-router on the front-end, which is tied together by Webpack. I'm planning to divide my app into "extensions", so I would have "core" bundle and multiple different extending bundles around it (which would be sets of additional features for my product).
Now, I would like for my front-end to be as extensible as my back-end. I would like to be able to add new React components with my extending bundles to the existing "core" set of components in my "CoreBundle".
However, it seems like the Webpack is encapsulating everything too tightly to be able to produce that kind of a plugin system. Is it possible to have multiple bundles that would have separate Webpack configurations, but their JavaScript would be interconnected in a way that would allow for developing of a plugin system? The goal is being able to develop JS of one Bundle independently but at the same time being able to use some already compiled JS resources from another Bundle in the process.
I think you should be able to achieve this using the DllPlugin and the DllReferencePlugin
The DllPlugin is used in a separate webpack config to create a dll
only bundle. It also creates a manifest.json file which is used by the
DllReferencePlugin to map dependencies.
Refer to the detailed documentation at
https://webpack.js.org/plugins/dll-plugin/
In my case, I use this to combine all vendor libraries (React, Flux, etc) in one build and then use that as a reference in my Other Webpack Config which bundles all my React components etc. but references React and other libraries using the DllReferencePlugin.
My webpack.dll.js config file:
var path = require("path");
var webpack = require("webpack");
module.exports = {
entry: {
libs: [path.join(__dirname, "common", "lib.js")]
},
output: {
path: path.join(__dirname, "dist", "dll"),
filename: "[name].dll.js",
library: "[name]"
},
plugins: [
new webpack.DllPlugin({
path: path.join(__dirname, "dll", "[name]-manifest.json"),
name: "[name]",
context: path.resolve(__dirname, "common")
}),
]
};
And then in my main webpack.config.js, I use the reference plugin.
new webpack.DllReferencePlugin({
context: path.resolve(__dirname, "common"),
manifest:require('./dll/libs-manifest.json')
})
Depending upon how you want to split your code, you can create multiple Dlls, each with a separate webpack config as per your requirements. And then refer the dll's as per your requirements in different other webpack bundles.
I'm using Webpack as our build/bundler for an application using a standard React/Redux/etc.
We have a requirement to build out custom components that can be loaded dynamically into the main application. This would require that the component is created OUTSIDE the main development so would not be involved in the main app build. The ideal solution would be to build out the components in their own side projects, bundle up (since they will have imports/require, etc) and spit out a bundle.js file that is only that component (could be multiple components merged together). Then we'd like to be able to take that file and dynamically load it in the main application dynamically.
I understand how code splitting works with webpack to a certain degree which we use in our main project. I've also been able to successfully import SIMPLE components externally I built out externally. The problem is that these external components can get pretty hefty so using a build/bundler to put it all together in one package would be ideal. I have no idea how to go about building components externally from the main project, bundle up using webpack to merge in all of the goodies into one package and inject that new bundled component which is typically wrapped in webpackjsonp and all the other runtime stuff.
Has anybody else been able to do something crazy like this?
Thanks!
EDIT
I've been able to successfully build a silo component in it's own project using webpack and dynamically loading that into a different running application bundled with webpack by using the Output.Library options as described here
Below is the sample config I used for testing a custom react component called TestMe located inside the index.js file of the test folder.
module.exports = {
entry: {
developer: "./test"
},
output: {
path: path.join(__dirname, "dist", "static", "developer"),
filename: "MyLibrary.[name].js",
library: ["MyLibrary", "[name]"],
libraryTarget: "var"
},
externals: {
'react': 'React'
, 'react-dom': 'ReactDOM'
, 'react-dom/server': 'ReactDOMServer'
, 'react/lisb/ReactTransitionGroup': 'React.addons.TransitionGroup'
, 'react/lib/ReactCSSTransitionGroup': 'React.addons.CSSTransitionGroup'
}, ...
When imported in you will have access to the TestMe component as a global variable MyLibrary.developer.TestMe (or MyLibrary.developer.default depending on how you exported the component). The externals are there to keep Webpack from including those in the final bundle which was already included in the main application. Otherwise you're going to get a really big nasty bundle file. Check out LibraryTarget if you rather have UMD, etc.
Moral of the story here is "when all else fails, read the docs again".