当前,由@angular/service-worker生成的SW脚本未压缩。这是有意为之,以便更容易调试,并且(可能提供问题的)堆栈跟踪更容易解释。这不是一个主要问题,因为浏览器会积极缓存SW脚本,并与页面渲染一起下载/解析/执行。尽管如此,既然SW现在更稳定了,将其压缩用于生产(带有源Map进行调试)可能是有意义的。
@angular/service-worker
au9on6nz1#
我希望在下一个版本中看到这个功能。我自己为一些文件设置了一个压缩器:
压缩代码
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) }
pqwbnv8z2#
我正在努力创建自己的压缩脚本。我试图使用terser的命令行版本,但是--compress和--mangle似乎破坏了代码。你能给我一个关于如何使用你的压缩脚本@muuvmuuv的例子吗?
svgewumm3#
@blasco 我创建了一个NodeJs脚本,它可以获取上述文件的内容,使用上述压缩器并覆盖它们。我明天会发布我的脚本,但它非常复杂。
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",
uhry853o5#
@muuvmuuv can u add method from ./utils ? to run your minify.js cript ? thanks
rkue9o1l6#
在这里,您可以找到@tomastalian: https://gist.github.com/muuvmuuv/3f8fae0c12cc0859195c1be981c88a19。
6条答案
按热度按时间au9on6nz1#
我希望在下一个版本中看到这个功能。我自己为一些文件设置了一个压缩器:
压缩代码
pqwbnv8z2#
我正在努力创建自己的压缩脚本。我试图使用terser的命令行版本,但是--compress和--mangle似乎破坏了代码。你能给我一个关于如何使用你的压缩脚本@muuvmuuv的例子吗?
svgewumm3#
@blasco 我创建了一个NodeJs脚本,它可以获取上述文件的内容,使用上述压缩器并覆盖它们。我明天会发布我的脚本,但它非常复杂。
ki1q1bka4#
NodeJS脚本用于在构建后压缩文件:
在package json中:
uhry853o5#
@muuvmuuv can u add method from ./utils ? to run your minify.js cript ? thanks
rkue9o1l6#
在这里,您可以找到@tomastalian: https://gist.github.com/muuvmuuv/3f8fae0c12cc0859195c1be981c88a19。