comments not removed

[Coding-Kiwi]

I have a component with a comment

<template>
    <div class="card">
        <!-- this is a test -->
        <div class="card-content">
            <slot />
        </div>
    </div>
</template>

<script>
/**
 * test 123
 */
export default {};
</script>

I use webpack to bundle my app

import { CleanWebpackPlugin } from "clean-webpack-plugin";
import HtmlWebpackPlugin from "html-webpack-plugin";
import path from "path";
import { fileURLToPath } from 'url';
import { VueLoaderPlugin } from "vue-loader";
import webpack from "webpack";

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

const SRC_DIR = path.resolve(__dirname, 'docs');
const OUT_DIR = path.resolve(__dirname, 'docs-dist');

export default (env) => {
    const mode = env.production == true ? "production" : "development";
    const devtool = mode == "production" ? false : "inline-source-map";

    return {
        mode: mode,
        entry: './docs/index.js',
        target: 'web',
        devtool: devtool,
        output: {
            filename: '[name].[contenthash].js',
            path: OUT_DIR,
            publicPath: '/'
        },
        module: {
            rules: [
                {
                    test: /\.vue$/,
                    loader: 'vue-loader'
                },
                {
                    test: /\.(sa|sc|c)ss$/,
                    use: [
                        'style-loader',
                        'css-loader',
                        'sass-loader',
                    ],
                }
            ],
        },
        plugins: [
            new CleanWebpackPlugin(),
            new webpack.DefinePlugin({
                __VUE_OPTIONS_API__: false,
                __VUE_PROD_DEVTOOLS__: false,
                __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: false,
            }),
            new HtmlWebpackPlugin({
                template: path.resolve(SRC_DIR, 'index.html')
            }),
            new VueLoaderPlugin()
        ],
    };
};

The "test 123" gets removed but the "this is a test" in the html is not removed and becomes part of the minifed bundle. Here you can see an example:

I use vue 3.4.27 and vue-loader 17.4.2
I do not have specified app.config.compilerOptions.comments

What am I missing?

[Coding-Kiwi]

I created an example project https://github.com/Coding-Kiwi/vue-comments

This is the comment https://github.com/Coding-Kiwi/vue-comments/blob/master/App.vue#L5

And in the build at the end you can see https://github.com/Coding-Kiwi/vue-comments/blob/master/dist/main.78f2c16d3e664b627fa4.js ... ,Yn(ro("div",null,[pr,co(" This is a comment "),dr],undefined,undefined,undefined ...

[Coding-Kiwi]

Okay after adding

options: {
    compilerOptions: {
        comments: false
    }
}

to the loader config it removes the comments..

The vue docs say the default is false, but only for the runtime-build which is not the case when using vue-loader

The vue-loader docs say the default compilerOptions is empty and to look at the vue-template-compiler docs

And there... the comments option is not even listed.

[ahubmann]

I came across the very same odd behaviour while analysing one of our builds.

I've traced this to the Vue.js compiler-core index file:

'use strict'

if (process.env.NODE_ENV === 'production') {
  module.exports = require('./dist/compiler-core.cjs.prod.js')
} else {
  module.exports = require('./dist/compiler-core.cjs.js')
}

So, depending on NODE_ENV, it's either including the production build of the compiler or the development build.

Looking further into the default compilerOptions,

comments: __DEV__,

is statically set to either true or false (in compiler-core.cjs.prod.js, this is false, and in compiler-core.cjs.js it's true).

Importing vue-loader is done in the scope of the webpack build process (import { VueLoaderPlugin } from "vue-loader"; in your example above), so Webpack's mode has no say here.

As you discovered, one solution is to explicitly set comments: false in the loader configuration. Another solution is to set NODE_ENV=production when executing the Webpack build or pass in a --node-env production option.

But I fully agree, if the Vue.js documentation says the default is false and Vue-loader says it's not setting any compilerOptions by default, I'd fully expect comments to be stripped in production builds.