标签: terser

所以我将 terser 与 gulp 一起使用，并尝试了几种组合，但似乎没有什么可以缩小函数名称，这里是一个例子：

function minify() {
    return gulp.src('js/**/*.js')

        .pipe(gTerser({
            keep_fnames: false,
            mangle: {
                keep_fnames: false,
            }
        }))
        .pipe(gulp.dest(`foo/js/`))
}

更新

这个配置也帮助我实现了我想要的：

   .pipe(gTerser({
        keep_fnames: false,
        mangle: {
            properties: {
                keep_quoted: true
            },
            keep_fnames: false,
        }
    }))

所以我使用bundlephobia来审核我的包的包大小。Bundlephobia 有一个名为“导出分析”的部分，它为您提供各个导出的包大小。

因此，这个包中的每个函数都是纯函数，因此，除非我遗漏了某些东西，否则我认为每个函数应该显示较小的大小，但所有函数（除了重新导出的函数）都具有相同的大小。

我试过：

• 添加"sideEffects": false"到我的package.json
• 将每个函数标记为#__PURE__

我正在使用汇总，这是我的汇总配置：

// rollup.config.js
import babel from '@rollup/plugin-babel';
import resolve from '@rollup/plugin-node-resolve';

const extensions = ['.js', '.ts', '.tsx'];

export default [
  {
    input: './src/index.ts',
    plugins: [
      resolve({
        extensions,
      }),
      babel({
        babelrc: false,
        presets: ['@babel/preset-env', '@babel/preset-typescript'],
        babelHelpers: 'bundled',
        extensions,
      }),
    ],
    output: {
      file: 'dist/index.js',
      format: 'umd',
      name: 'parseToRgba',
      sourcemap: true,
    },
  },
  {
    input: './src/index.ts',
    plugins: [
      resolve({
        extensions,
        modulesOnly: true,
      }),
      babel({
        babelrc: false,
        presets: …

我们的第三方库之一要求我们保留特定的函数名称。在 webpack 中我们用terser.keep_fnames. esbuild 有https://esbuild.github.io/api/#keep-names所以我们想使用它，但我们找不到如何为 vite 生产构建启用此选项。

根据文档 esbuild 用于缩小。我们如何启用这个标志（或类似的选项）？请注意，我们不想使用 terser，因为它比 esbuild 慢得多。

有一个未记录的config.esbuild道具。这似乎在当前的主代码中使用： https://github.com/vitejs/vite/blob/f72fdc7c995db502ca89f0057cfc1fcd6660212f/packages/vite/src/node/plugins/esbuild.ts#L352

但是当我尝试添加config.esbuild.keepNames到配置对象（当然作为对象字段）时，它没有执行任何操作。

我正在使用带有Vue 3.9.3 的Webpack 6.10.2 。 此安装使用 Uglify.js，它在我运行时抛出错误，npm run build因为它无法与 ES6 一起使用。

为了解决这个问题，我webpack.config.js按照建议删除了 Uglify 表单，并尝试使用 Terser 来缩小生产中的 JS。我所做的每一次尝试都会导致错误，因为我没有正确添加语法。当我删除 Terser 时，应用程序编译但显然没有 JS 缩小，所以我在webpack.config.js.

谁能告诉我我哪里出错了。

谢谢

webpack.config.js :

var path = require('path')
var webpack = require('webpack')
const TerserPlugin = require('terser-webpack-plugin')

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader'
        ],
      },
      {
        test: /\.scss$/,
        use: [
          'vue-style-loader',
          'css-loader', …

我需要支持相当旧的浏览器...我想说最后回到 IE10 或 11。

我添加rollup了terser...我想编写带有箭头函数等的 ES2017 代码...然后将其转换为非常旧版本的 JS 以在那些旧浏览器中运行。

这是我的汇总配置：

import { terser } from 'rollup-plugin-terser';

export default {
  input: 'src/load.js',
  output: {
    file: 'dist/load.js',
    format: 'iife',
    sourcemap: false,
    plugins: [
      // https://github.com/terser/terser#minify-options
      terser({
        ecma: '5',
        compress: true,
        mangle: true,
      }),
    ],
  },
};

不幸的是，这似乎并没有真正将我的任何花哨的箭头函数转换为普通的匿名函数等......我有点困惑我在这里做错了什么？

我发现我可以通过compress选项手动控制这些功能，但我不觉得应该要求我手动设置每种类型的功能，因为我不知道哪些浏览器支持哪些功能。我怀疑我只是告诉它“转换为 ES5”，它就会完成剩下的事情。

我们一直在使用 UglifyJS 和 webpack v4 作为我们的 React 代码，但后来才更新到 webpack v5。UglifyJS 似乎不适用于 webpack v5。有替代方案吗？我们需要一些可以与 babel-loader 配合使用的东西。

谢谢