how to compress the html code in vue file?

[caiobiodere]

how to compress the html code in vue file?

[centrual]

Compression means gzip, rar, zip etc. Why compression needed also how is related with this template?

If you asking minify, when you add --release to the command, it's automatically adds uglify js, so your javascript files become uglified ( uglify = minify + naming obfuscate ). Also everytime it minifies generated html file.

[ching2018]

cordova run browser -- --live-reload --release

i try to use this code to test my project

as you can see, when i use that code to compress, it seems to not work. but i can use the HtmlWebpackPlugin to compress html code, then these five div can display inline-block.

[ching2018]

thanks for your help, have a greate day~

[centrual]

edit like that:

.actionBox {
  display: block;
  box-sizing: border-box !important;
}

.action {
  box-sizing: border-box !important;
}

also inline-block understand whitespace, so please don't add whitespace between action divs.

<div class="action">
  ...
</div><div class="action">
  ...
</div>

cordova run browser --release --live-reload command not available. Only use --release command for build your project for production. Samples:

cordova run browser -- --live-reload
cordova run android -- --lr
cordova build android --release

Note: -- --live-reload same as -- --lr. lr is shorthand usage.

[ching2018]

very helpful! but could you teach me to change the configure of webpack.config.js?

[ching2018]

well , i got the answer:

            rules: [{
                test: /\.css$/,
                use: [{
                    loader: "style-loader"
                }, {
                    loader: "css-loader"
                }]
            }, {
                test: /\.useable\.css$/,
                use: [{
                    loader: "style-loader/useable"
                }, {
                    loader: "css-loader"
                }]
            }, {
                test: /\.js?$/,
                loader: 'source-map-loader',
                enforce: 'pre'
            }, {
                test: /\.(png|jpe?g|gif)$/,
                loader: 'file-loader',
                options: {
                    name: '[name].[ext]?[hash]'
                }
            }, {
                test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
                loader: 'file-loader',
                options: {
                    name: '[name].[ext]?[hash]'
                }
            }, {
                test: /\.svg$/,
                loader: 'url-loader'
            }, {
                test: /\.vue$/,
                loader: 'vue-loader',
                options: {
                    preserveWhitespace: false
                }
            }]
        },

[ching2018]

use preserveWhitespace: false in vue-loader options