缩小嵌入到 .html 文件中的 JS

Question

我有一个 HTML 文件，其中嵌入了 javascript 代码，这是一个简单的例子：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script type=”text/javascript”>
    // javascript code 
    </script>
</head>
<body>
<!-- some html -->
</body>
</html>

获取包含所有 JS 代码段 minified 的同一个文件的最简单方法是什么？

HTML 文件可以任意复杂并且有多个脚本片段。由于多种原因，我不需要在生成的 html 中将 js 拆分为单独的 .js 文件。

我们使用闭包编译器并且在项目中有grunt。

Answer 1

Vulcanize and Crisper 的 Polymer Project 工具可以促进这一点。

Cripser 将删除 JavaScript 到它自己的文件中，然后您可以使用您选择的工具将其缩小。

Vulcanize 将采用外部 JavaScript 文件并将其内联回去。

Answer 2

选项 1： 使用 html-minifier 它可以开箱即用地满足我的需求 (https://github.com/gruntjs/grunt-contrib-htmlmin, https://github.com/kangax/html-minifier#options-quick-reference)

所以 grunt 片段看起来像这样：

htmlmin: {                                                              
    demo: {                                                         
        options: {                                                      
            removeComments: true,                                       
            collapseWhitespace: true,                                   
            minifyJS: true                                              
        },                                                              
        files: {                                                        
            'demo/demo.html'      
        }                                                               
    }                                                                   
}

选项 2：

使用https://github.com/Polymer/vulcanize and https://github.com/PolymerLabs/crisper 正如@Chad Killingsworth 建议的那样。

Crisper 可以将嵌入式脚本提取到外部文件（.html 和 .js）
可以使用任何可用的缩小工具缩小生成的 .js 文件
Vulcanize 反过来可以将前面步骤产生的所有文件组合成一个 .html 文件

看起来是最灵活的方法。此外，原始 js 可以存储在单独的 js 文件中，然后仅使用 Vulcanize 而不使用 Crisper 简单地组合成单个文件。没有机会将它组合成一个执行要求的 grunt 任务。

选项 3：

Grunt 嵌入 (https://www.npmjs.com/package/grunt-embed, https://github.com/callumlocke/resource-embedder)

虽然它看起来死气沉沉，而且只做 Vulcanize 可以做的一部分事情，但它提供了一些很棒的功能，比如根据资源大小嵌入和指示需要嵌入什么的数据属性

Grunt 示例：嵌入任何大小小于 5KB（默认阈值）的外部脚本和样式表：

grunt.initConfig({
  embed: {
    some_target: {
      files: {
        'dest/output.html': 'src/input.html'
      }
    }
  }
})

Html 嵌入特定资源的标记，无论文件大小如何

<script src="foo.js" data-embed></script>
<link rel="stylesheet" href="foo.css" data-embed>

仅在特定大小以下时嵌入特定资源：

<script src="foo.js" data-embed="2000"></script>
<link rel="stylesheet" href="foo.css" data-embed="5KB">

Answer 3

有了Webpack，就可以使用html-webpack-inline-source-plugin。这是 webpack 插件 html-webpack-plugin 的扩展插件。它允许您内嵌 javascript 和 css 源代码。

这是 webpack.config.js 中的样子：

const HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin');

module.exports = {
  entry: { index: 'src/index.js' },
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'src/index.html',
      minify: {
          collapseWhitespace: true,
          removeComments: true,
          minifyJS: true,
          minifyCSS: true
      },
      inlineSource: '.(js|css)$'
  })
  ...

然后所有 .js 和 .css 将在生成的 index.html.

中内联

参考文献：

缩小嵌入到 .html 文件中的 JS

Minify JS embedded into .html file

javascript

html

minify

google-closure-compiler