Question

我正在尝试使用Webpack压缩我的代码（删除新行和空白），而没有其他压缩。我不需要任何webpack__require__，不要乱码，不要丑陋，只需删除空格和换行即可。

要实现此目的，我必须在terser / webpack中使用哪些选项？

<template>
    <div id="card">
        <h1>{{ name }}</h1>
        <ul>
            <li v-for="skill in skillsAll">{{ skill }}</li>
        </ul>
    </div>
</template>

<script>
    export default {
        props: ["name", "skillsAll", "skill"]
    };
</script>

似乎没有这样做。预先谢谢你。

Answer 1

如果要做的只是删除空格和换行符，您就可以不包含--mangle或--compress命令，只是基于felismosh对CLI的回答。

因此它将更像是： terser original-file.js -o minified-file.js。

除非在CLI命令中显式打开，否则禁用混合和压缩。

Answer 2

仅在不使用webpack的情况下直接使用terser。运行npm i terser进行安装，然后有2个选择：

使用cli terser --compress --mangle -- input.js。
使用节点

const Terser = require('terser');

const code = {
  'file1.js': 'function add(first, second) { return first + second; }',
  'file2.js': 'console.log(add(1 + 2, 3 + 4));',
};
const options = {
  ecma: undefined,
  warnings: false,
  parse: {},
  compress: {},
  mangle: false,
  module: false,
  toplevel: false,
  keep_classnames: true,
  keep_fnames: true,
};
const result = Terser.minify(code, options);
console.log(result.code);

Answer 3

这将禁用压缩，并使用output选项删除注释。 extractComments属性可防止插件将注释提取到文本文件。

module.exports = {
    /* ... */
    optimization: {
        minimizer: [
            new TerserPlugin({
                terserOptions: {
                    compress: false,
                    output: {
                        comments: false,
                    },
                },
                extractComments: false,
            }),
        ],
    },
};

如何使用Webpack和Terser仅压缩代码

3 个答案: