angular feat(service-worker):压缩SW脚本(+源Map)

8zzbczxx  于 4个月前  发布在  Angular
关注(0)|答案(6)|浏览(89)

当前,由@angular/service-worker生成的SW脚本未压缩。这是有意为之,以便更容易调试,并且(可能提供问题的)堆栈跟踪更容易解释。这不是一个主要问题,因为浏览器会积极缓存SW脚本,并与页面渲染一起下载/解析/执行。
尽管如此,既然SW现在更稳定了,将其压缩用于生产(带有源Map进行调试)可能是有意义的。

au9on6nz

au9on6nz1#

我希望在下一个版本中看到这个功能。我自己为一些文件设置了一个压缩器:

  • index.html
  • ngsw-worker.js
  • worker-basic.min.js (.min 但没有压缩 ^^)
  • safety-worker.js (与 worker-basic 内容相同吗?)
  • manifest.webmanifest
  • ngsw.json

压缩代码

const htmlMinifier = require('html-minifier-terser').minify
const jsMinifier = require('terser').minify

function minifyHtml(contents) {
  return htmlMinifier(contents, {
    collapseBooleanAttributes: true,
    collapseWhitespace: true,
    decodeEntities: true,
    includeAutoGeneratedTags: false,
    minifyCSS: true,
    minifyJS: true,
    minifyURLs: true,
    processScripts: ['text/html'],
    removeAttributeQuotes: true,
    removeComments: true,
    removeOptionalTags: true,
    removeRedundantAttributes: true,
    removeScriptTypeAttributes: true,
    removeStyleLinkTypeAttributes: true,
    trimCustomFragments: true,
    useShortDoctype: true,
  })
}

function minifyJs(contents) {
  return jsMinifier(contents, {
    keep_classnames: true,
    keep_fnames: true,
    output: {
      comments: '',
    },
  }).code
}

function minifyJson(contents) {
  if (contents.$schema) {
    // $schema is only needed for autocompletion
    delete contents.$schema
  }
  return JSON.stringify(contents)
}
pqwbnv8z

pqwbnv8z2#

我正在努力创建自己的压缩脚本。我试图使用terser的命令行版本,但是--compress和--mangle似乎破坏了代码。你能给我一个关于如何使用你的压缩脚本@muuvmuuv的例子吗?

svgewumm

svgewumm3#

@blasco 我创建了一个NodeJs脚本,它可以获取上述文件的内容,使用上述压缩器并覆盖它们。我明天会发布我的脚本,但它非常复杂。

ki1q1bka

ki1q1bka4#

NodeJS脚本用于在构建后压缩文件:

#!/usr/bin/env node

const fs = require('fs')
const path = require('path')
const { cyan, dim, green, red } = require('kleur')

const { projectRoot, minifyHtml, minifyJs, minifyJson } = require('./utils')
const dist = path.join(projectRoot, 'dist', 'aqua')

const input = {
  html: ['index.html'],
  js: ['ngsw-worker.js', 'worker-basic.min.js', 'safety-worker.js'],
  json: ['manifest.webmanifest', 'ngsw.json'],
}

function minify(file, ext) {
  const filePath = path.join(dist, file)
  let minified,
    contents = ''

  try {
    contents = fs.readFileSync(filePath, { encoding: 'utf-8' })
  } catch (error) {
    console.log(red('File not found ' + filePath))
    return
  }

  switch (ext) {
    case 'html':
      minified = minifyHtml(contents)
      break
    case 'js':
      minified = minifyJs(contents)
      break
    case 'json':
      minified = minifyJson(JSON.parse(contents))
      break
    default:
      throw new Error('Unknown extension: ' + ext)
  }

  fs.writeFileSync(filePath, minified)
}

console.log(cyan('Minifying files...'))

Object.entries(input).forEach(([ext, files]) => {
  files.forEach((file) => {
    console.log(dim('> File ' + file))
    minify(file, ext)
  })
})

console.log(green('Done!'))

在package json中:

"build": "run-s build:*",
    "build:ng": "ng build --prod",
    "build:min": "node scripts/minify.js",
uhry853o

uhry853o5#

@muuvmuuv can u add method from ./utils ? to run your minify.js cript ? thanks

相关问题