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

Question

我有一個嵌入了javascript代碼的HTML文件，這是一個簡單的示例：

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

用最小的 JS代碼片段獲取同一文件的最簡單方法是什么？

HTML文件可以任意復雜，並且具有多個腳本片段。 由於多種原因，我不需要在生成的html中將js拆分為單獨的.js文件。

我們使用閉包編譯器，並且在項目中很苦惱。

Answer 1

Vulcanize和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 -快速參考）

因此，簡短的代碼段如下所示：

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

選項2：

按照@Chad Killingsworth的建議使用https://github.com/Polymer/vulcanize和https://github.com/PolymerLabs/crisper 。

Crisper支持將嵌入式腳本提取到外部文件（.html和.js）中
可以使用任何可用的縮小工具來縮小生成的.js文件
反過來， Vulcanize可以將前面步驟中得到的所有文件合並為一個.html文件

看起來是最靈活的方法。 此外，原始js可以存儲在單獨的js文件中，然后僅使用Vulcanize而不使用Crisper即可簡單地組合為單個文件。 沒有機會將其合並為完成要求的任務。

選項3：

咕嚕嵌入（ 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的擴展html-webpack-plugin 。 它允許您內嵌javascript和CSS源代碼。

這是webpack.config.js中的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 webpack插件
HTML Webpack插件的內聯源擴展

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

問題描述

3 個解決方案

解決方案1
3 2016-09-01 21:22:27

解決方案2
1 已采納 2016-09-02 18:49:17

解決方案3
0 2018-10-02 21:41:25

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

問題描述

3 個解決方案

解決方案1 3 2016-09-01 21:22:27

解決方案2 1 已采納 2016-09-02 18:49:17

解決方案3 0 2018-10-02 21:41:25

解決方案1
3 2016-09-01 21:22:27

解決方案2
1 已采納 2016-09-02 18:49:17

解決方案3
0 2018-10-02 21:41:25