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.
Related
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 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 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'm using webstorm and have custom config files for both jshint and jscs, in jshint I've added this params:
jshintrc:
{
"globals": {
"jasmine": true,
"angular": true,
"browser": true,
"element": true
}
}
But it still keeps highlighting angular and everything angular related.
How can I finally enable it?
I have a protractor test script file that looks like this:
var TestPage = function () {
this.detailsTab = element(by.id('detailsTab'));
..
It's giving me a lot of errors saying element and by are not defined. Is there a way I can stop all these hint errors from appearing?
From the protractor tutorial page you can see that these globals are created by Protactor:
This uses the globals element and by, which are also created by
Protractor.
So you need a way of telling JSHint about these globals. You can do this in your configuration for JSHint. http://www.jshint.com/docs/
Inline Configuration Method
One of the ways JSHint can be configured is by using adding special inline comments. Below is an excerpt taken from the JSHint docs page that describes how to specify global using the inline comment configuration method.
globals - A directive for telling JSHint about global variables that are defined
elsewhere. If value is false (default), JSHint will consider that
variable as read-only. Use it together with the undef option.
/* global MY_LIB: false */
Update: So for protractor the inline config would be:
/* global element */
/* global by */
or as suggested by #runTarm this condensed syntax will also work:
/* global element, by */
Config File Method
You can also configure JSHint by using configuration files. Check the documentation for the different ways to specify the config file. From the docs page we the following excerpt that explains how to write the file to specify a global variable.
Configuration file is a simple JSON file that specifies which JSHint
options to turn on or off. For example, the following file will enable
warnings about undefined and unused variables and tell JSHint about a
global variable named MY_GLOBAL.
{
"undef": true,
"unused": true,
"predef": [ "MY_GLOBAL" ]
}
Here is an example .jshint file with the globals being removed:
{
"node": true,
"browser": true,
"esnext": true,
"bitwise": true,
"camelcase": true,
"curly": true,
"eqeqeq": true,
"immed": true,
"indent": 4,
"latedef": true,
"newcap": true,
"noarg": true,
"quotmark": "single",
"undef": true,
"unused": true,
"strict": true,
"trailing": true,
"smarttabs": true,
"multistr": true,
"globals": {
"after": false,
"afterEach": false,
"angular": false,
"before": false,
"beforeEach": false,
"browser": false,
"describe": false,
"expect": false,
"inject": false,
"it": false,
"jasmine": false,
"spyOn": false,
"Kinetix": false,
"$": false
}
}
the actual .jshintrc configuration for protractor
if you want to get rid of jshint warnings for protractor, updating .jshintrc is the best approach. adding global overrides per file is rather tedious.
add the following to your .jshintrc file (you should be able to add a .jshintrc file in the directory that contains your tests rather than the root/all of your source)
.jshintrc:
{
... your other jshint stuff ...
"jasmine": true,
"mocha": true,
"globals": {
"angular": false,
"browser": false,
"inject": false,
"_": false,
"driver": false,
"protractor": false,
"browser": false,
"$": false,
"$$": false,
"element": false,
"by": false,
"list": false
}
}
what this does: (you may not need jasmine/mocha depending on how you wrote your tests)
jasmine is required for things like expect
mocha is required for things like beforeEach -
the globals are other things that protractor defines on as globals - see https://github.com/angular/protractor/blob/master/lib/runner.js#L152