我在以下设置中使用HtmlWebpackPlugin:
new HtmlWebpackPlugin({
template: 'src/index.ejs',
minify: isDevelopment ? false : {
caseSensitive: false,
removeComments: true,
collapseWhitespace: true,
removeRedundantAttributes: true,
useShortDoctype: false,
removeEmptyAttributes: true,
removeStyleLinkTypeAttributes: true,
removeScriptTypeAttributes: true,
keepClosingSlash: false,
minifyJS: true,
minifyCSS: true,
minifyURLs: true,
sortAttributes: true,
sortClassName: true,
},
}),
我相信它会转发到html-minifier-terser,但它没有压缩我的<script>
标签。
HTML和CSS被压缩,但我的JS不压缩。
如何启用脚本压缩?
实际上并非完全正确,我不确定它在做什么。这个:
<script>
// TODO: compress this or move this or something
if('serviceWorker' in navigator) {
window.addEventListener('load', () => {
// https://github.com/GoogleChrome/workbox/issues/1790
navigator.serviceWorker.register('/service-worker.js').then(registration => {
console.info('SW registered: ', registration);
}).catch(registrationError => {
console.error('SW registration failed: ', registrationError);
});
});
}
</script>
“压缩”到此:
<script>// TODO: compress this or move this or something
if('serviceWorker' in navigator) {
window.addEventListener('load', () => {
// https://github.com/GoogleChrome/workbox/issues/1790
navigator.serviceWorker.register('/service-worker.js').then(registration => {
console.info('SW registered: ', registration);
}).catch(registrationError => {
console.error('SW registration failed: ', registrationError);
});
});
}</script>
即,它删除了一些空格,甚至可能只是来自collapseWhitespace
选项的空格。但是,这:
<script>if('serviceWorker' in navigator)navigator.serviceWorker.register('/service-worker.js')</script>
将压缩为:
<script>"serviceWorker"in navigator&&navigator.serviceWorker.register("/service-worker.js")</script>
所以它[[是正在做某事,但我不知道该怎么办。当我在其中发表评论时,感觉不一样吗?
new HtmlWebpackPlugin({
template: 'src/index.ejs',
minify: isDevelopment ? false : {
caseSensitive: false,
removeComments: true,
collapseWhitespace: true,
removeRedundantAttributes: true,
useShortDoctype: false,
removeEmptyAttributes: true,
removeStyleLinkTypeAttributes: true,
removeScriptTypeAttributes: true,
keepClosingSlash: false,
minifyJS: { compress: { conditionals: false }}
minifyCSS: true,
minifyURLs: true,
sortAttributes: true,
sortClassName: true,
},
}),
但是如果minifyJS: true
,则代码会像您一样中断问题是minifyJS: true
过多干扰了脚本。看看有多少选择,只是压缩,精神错乱compress-options:)
我从来没有自己压缩过html脚本,原因很简单,那就是它有太多问题。我总是设置minify: true
,默认情况下会给我们:
{
collapseWhitespace: true,
removeComments: true,
removeRedundantAttributes: true,
removeScriptTypeAttributes: true,
removeStyleLinkTypeAttributes: true,
useShortDoctype: true
}
new HtmlWebpackPlugin({
template: 'src/index.ejs',
showErrors: isDevelopment,
minify: isDevelopment ? false : {
caseSensitive: false,
removeComments: true,
collapseWhitespace: true,
removeRedundantAttributes: true,
useShortDoctype: false,
removeEmptyAttributes: true,
removeStyleLinkTypeAttributes: true,
removeScriptTypeAttributes: true,
keepClosingSlash: false,
minifyJS: code => Terser.minify(code).code, // <-- call it manually
minifyCSS: true,
minifyURLs: true,
sortAttributes: true,
sortClassName: true,
},
}),