I'm splitting my build bundle on different chunks, but getting warnings about size limits, tried to find decision by myself, without results.
My current optimization config:
optimization: {
moduleIds: 'hashed',
noEmitOnErrors: true,
concatenateModules: true,
occurrenceOrder: true,
sideEffects: true,
usedExports: true,
namedModules: false,
namedChunks: false,
splitChunks: {
maxSize: 480000,
minSize: 240000,
chunks: "all"
},
minimizer: [
new TerserPlugin()
],
},
How to split my bundle on more chunks with smaller size?
And other warning is about Entrypoints...
Please give me some advices to fix it.
Related
I recently updated to Material UI5 and had to make a whole bunch of changes in the codebase. I did a lot of this using the VSCode search and replace function.
Now, whenever I build my app, I get a whole string of warnings saying that there is an unused import, even though all of these lines have been removed. (Note: This is all on the dev build)
If I go into the file that is generating the warning and save it (even though there are no changes to be saved) then it seems that webpack recognizes the change and stops issuing the warning.
Is there any way to somehow clear the cache or get webpack to recognize that these warnings aren't current?
File:
Warning:
edit: .eslintrc.js
module.exports = {
parser: '#typescript-eslint/parser',
root: true,
env: {
es6: true,
node: true,
browser: true,
},
parserOptions: {
ecmaVersion: 6,
sourceType: 'module',
tsconfigRootDir: __dirname,
project: './tsconfig.eslint.json',
ecmaFeatures: {
jsx: true,
},
},
plugins: ['react', 'react-hooks', '#typescript-eslint', 'cypress'],
rules: {
'react-hooks/rules-of-hooks': 'error', // Checks rules of Hooks
'react-hooks/exhaustive-deps': 'warn', // Checks effect dependencies
'no-use-before-define': 'off',
'#typescript-eslint/no-use-before-define': ['error'],
'#typescript-eslint/no-namespace': ['off'],
'#typescript-eslint/no-explicit-any': ['off'], // Maybe a good rule, but it's a pain in the ass
},
settings: {
react: {
version: 'detect', // Tells eslint-plugin-react to automatically detect the version of React to use
},
},
extends: [
'eslint:recommended',
'plugin:react/recommended',
'plugin:#typescript-eslint/eslint-recommended',
'plugin:#typescript-eslint/recommended',
// 'plugin:prettier/recommended',
],
overrides: [
{
files: ['**/*.js', '**/*.jsx'],
rules: {
'#typescript-eslint/no-var-requires': 'off',
'#typescript-eslint/eslint-recommended': 'off',
'#typescript-eslint/recommended': 'off',
'#typescript-eslint/explicit-module-boundary-types': 'off',
},
},
{
files: ['**/styles.ts'],
rules: {
'#typescript-eslint/explicit-module-boundary-types': 'off',
'#typescript-eslint/no-unused-vars': 'off',
},
},
],
}
I'm using webpack in my react project.
I'm looking for the best approach about the DLL's configuration,
my latest approach is to split the DLL's to many small files.
the code in my webpack.cofig is:
optimization: {
runtimeChunk: 'single',
splitChunks: {
chunks: 'all',
maxInitialRequests: Infinity,
minSize: 0,
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
name(module) {
const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];
return `npm.${packageName.replace('#', '')}`;
},
},
},
},
},
The result is a long bundle time.
This is a good approach or it's better to have bigger DLL's files?
I'm wondering is it possible to minify the page source code to one line in Nuxt.js?
I think nuxt has already minified hmtl itself. learn more in https://nuxtjs.org/api/configuration-build/#html-minify.
if you want to minify css and js, try this one ini nuxt.config.js:
build: {
html:{
minify:{
collapseBooleanAttributes: true,
decodeEntities: true,
minifyCSS: true,
minifyJS: true,
processConditionalComments: true,
removeEmptyAttributes: true,
removeRedundantAttributes: true,
trimCustomFragments: true,
useShortDoctype: true,
minifyURLs: true,
removeComments: true,
removeEmptyElements: true
}
}
The answer from Prana is a step in the right direction. To minify the page source code to one line you should add as well:
preserveLineBreaks: false
collapseWhitespace: true
Note two last lines under build.html.minify in the code snippet below.
build: {
html: {
minify: {
collapseBooleanAttributes: true,
decodeEntities: true,
minifyCSS: true,
minifyJS: true,
processConditionalComments: true,
removeEmptyAttributes: true,
removeRedundantAttributes: true,
trimCustomFragments: true,
useShortDoctype: true,
preserveLineBreaks: false,
collapseWhitespace: true
}
},
}
Not sure if it is possible to minify it to one line, but you can definitely do some minification of the HTML. Check out this part of the documentation:
https://nuxtjs.org/api/configuration-build/#html-minify
According to the authors, nuxt uses https://github.com/kangax/html-minifier under the hood, and there seems to be quite a few minification options to pick from.
I wrote a web app using React, and I build it using Webpack. But in the production build, I want to get rid of all the console log statement because I don't want people to see some information such as their UID. Is there anything I can config in Webpack so that it will automatically get rid of all the console log? I tried p flag but it didn't do that.
Try using the UglifyJsPlugin with this configuration:
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false,
screw_ie8: true,
conditionals: true,
unused: true,
comparisons: true,
sequences: true,
dead_code: true,
evaluate: true,
if_return: true,
join_vars: true,
drop_console: true,
drop_debugger: true,
global_defs: {
__REACT_HOT_LOADER__: undefined // eslint-disable-line no-undefined
}
},
minimize: true,
debug: false,
sourceMap: true,
output: {
comments: false
},
}),
You can see the whole config file here: https://github.com/jquintozamora/react-typescript-webpack2-cssModules-postCSS/blob/master/webpack/webpack.config.prod.js
I am working on a React application and uses Webpack to create bundle.js file. Even though my application is very simple bundle.js file size is around 11MB.
When I analyze the bundle file with https://webpack.github.io/analyse/, more than 1000 packages are included in the bundle.js. Some of those packages are defined in devDependencies section of the package.json file.
Therefore I am looking for answers to following questions.
Is there a way to reduce file size of the webpack compilation?
Does webpack include devDependencies modules in final bundle.js?
change devtool: 'cheap-module-eval-source-map' to devtool: 'cheap-source-map' in webpack config. beacause webpack -p doesnot accept cheap-module-eval-source-map
I have webpack 6.0.1. In addition to usual webpack.config.js settings I can suggest the following optimization model (webpack.config.js production mode). For more info see the optimization, mode configuration and comments related to plugins at the bottom:
//webpack.config.js
module.exports = {
...
devtool: 'cheap-module-source-map',
...
plugins : [
...
new webpack.DefinePlugin({ 'process.env.NODE_ENV': JSON.stringify('production') }),
new webpack.optimize.ModuleConcatenationPlugin(),
new webpack.HashedModuleIdsPlugin({
hashFunction: 'sha256',
hashDigest: 'hex',
hashDigestLength: 4
}),
new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.NoEmitOnErrorsPlugin(),
],
...
optimization: {
namedModules: false,
namedChunks: false,
nodeEnv: 'production',
flagIncludedChunks: true,
occurrenceOrder: true,
sideEffects: true,
usedExports: true,
concatenateModules: true,
splitChunks: {
cacheGroups: {
commons: {
test: /[\\/]node_modules[\\/]/,
name: 'vendor',
chunks: 'all'
}
},
minSize: 30000,
maxAsyncRequests: 5,
maxAsyncRequests: 3,
},
noEmitOnErrors: true,
minimize: true,
minimizer: [
// we specify a custom UglifyJsPlugin here to get source maps in production
new UglifyJsPlugin({
cache: true,
parallel: true,
uglifyOptions: {
compress: false,
ecma: 6,
mangle: true
},
sourceMap: true
})
],
removeAvailableModules: true,
removeEmptyChunks: true,
mergeDuplicateChunks: true,
},
...
}
Comments:
webpack.optimize.ModuleConcatenationPlugin() - concatenate the scope
of all your modules into one closure and allow for your code to have
a faster execution time in the browser
webpack.HashedModuleIdsPlugin() - cause hashes to be based on the
relative path of the module, generating a four character string as
the module id
webpack.optimize.OccurrenceOrderPlugin() - vary the
distribution of the ids to get the smallest id length for often used
ids
webpack.NoEmitOnErrorsPlugin() - skip the emitting phase
whenever there are errors while compiling. This ensures that no
assets are emitted that include errors