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
Related
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'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.
I am using AngularJS writen in typescript and SystemJS module builder.
My app's main file (app.ts) is located inside Scripts/App.
SytemJS production configuration from gulpfile.js:
gulp.task("deploy", ["ts", "vendorjs", "app-css"], function (done) {
return systemBuild("./Scripts/App/app", "./dist/js/main_" + build + ".min.js");
});
function systemBuild(sourcepath, targetPath, cb) {
var builder = new Builder();
// Collection bundling
builder.config({
defaultJSExtensions: true,
map: {
"ts": "node_modules/plugin-typescript/lib/plugin.js"
},
baseURL: "./Scripts",
transpiler: "ts",
typescriptOptions: {
module: "system",
target: "es5",
sourceMap: true,
inlineSourceMap: true,
inlineSources: true,
resolveTypings: true,
emitDecoratorMetadata: true,
noImplicitAny: true,
typeCheck: true, // also accepts "strict"
tsconfig: true // also accepts a path
},
packages: {
"app": {
defaultExtension: "ts"
}
}
});
return builder.buildStatic(sourcepath, targetPath, {
minify: true,
mangle: true,
sourceMaps: false,
sourceMapContents: false,
globalDefs: { DEBUG: false }
});
}
After running gulp default, I am getting 'Uncaught SyntaxError: Unexpected token <' error. Could anybody tell me what I am doing wrong?
I am using WebStorm IDE and created my angularJS project. I am also using grunt, and am using grunt-contrib-jshint. I had some options preconfigured in my .jshintrc file which were already in the angular-seed repository I used to create the project:
{
"strict": "global",
"node": true,
"globals": {
// Angular
"angular": false,
// Angular mocks
"module": false,
"inject": false,
// Jasmine
"jasmine": false,
"describe": false,
"beforeEach": false,
"afterEach": false,
"it": false,
"expect": false,
// Protractor
"browser": false,
"element": false,
"by": false
}
}
When I run grunt jshint on terminal, I get many errors, all of them related to the errors which arise when options are not set properly. However, when I copy these options and put them in my Gruntfile, everything works like a charm.
jshint: {
files: ['Gruntfile.js', 'app/**/*.js'],
options: {
// options here to override JSHint defaults
node: true,
globals: {
// Angular
angular: false,
// Angular mocks
module: false,
inject: false,
// Jasmine
jasmine: false,
describe: false,
beforeEach: false,
afterEach: false,
it: false,
expect: false,
// Protractor
browser: false,
element: false,
by: false
}
}
},
Basically, what I've understood is jshint is not reading options from the .jshintrc file. How do I solve this issue?
Set the option jshintrc for your jshint task to true.
If set to true, no config will be sent to JSHint and JSHint will search for .jshintrc files relative to the files being linted.
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