在优化Pagespeed之后，Grunt usemin无法正常工作

Question

I recently did some optimizations to improve the score of the application I'm working on (AngularJS) in the Pagespeed tool from the Google webmaster tools. 我最近做了一些优化，通过Google网站管理员工具在Pagespeed工具中提高我正在处理的应用程序（AngularJS）的得分。

Specifically, Google was asking to "Eliminate render-blocking JavaScript and CSS in above-the-fold content". 具体来说，谷歌要求“在首映内容中消除渲染阻止JavaScript和CSS”。 So I removed the declarations and moved them into a script that loads when the page finishes loading, so I went from: 所以我删除了声明并将它们移动到一个脚本，该脚本在页面加载完成后加载，所以我从：

<link rel="stylesheet" href="/bundles/vendor.css"/>
<link rel="stylesheet" href="/bundles/common.css"/>
<script src="/bundles/vendor.bundle.js"></script>

to this: 对此：

    <script type="text/javascript">
    function downloadJSAtOnload() {

        var stylesheet1 = document.createElement('link');
        stylesheet1.href = "https://fonts.googleapis.com/css?family=Poppins";
        stylesheet1.rel = 'stylesheet';
        stylesheet1.type = 'text/css';
        document.getElementsByTagName('head')[0].appendChild(stylesheet1);

        var stylesheet2 = document.createElement('link');
        stylesheet2.href = "/bundles/vendor.css";
        stylesheet2.rel = 'stylesheet';
        stylesheet2.type = 'text/css';
        document.getElementsByTagName('head')[0].appendChild(stylesheet2);

        var stylesheet3 = document.createElement('link');
        stylesheet3.href = "/bundles/common.css";
        stylesheet3.rel = 'stylesheet';
        stylesheet3.type = 'text/css';
        document.getElementsByTagName('head')[0].appendChild(stylesheet3);

        var element1 = document.createElement("script");
        element1.src = "/bundles/common.bundle.js";
        document.body.appendChild(element1);

    }
    if (window.addEventListener)
        window.addEventListener("load", downloadJSAtOnload, false);
    else if (window.attachEvent)
        window.attachEvent("onload", downloadJSAtOnload);
    else window.onload = downloadJSAtOnload;
</script>

at the bottom of the body element. 在身体元素的底部。

It worked great and improved my score a lot, but, it caused problems with the distribution. 它运作良好并且提高了我的分数，但是，它导致分发问题。

We use grunt for building the assets, we do the usual uglify, minify, etc. We call the filerev grunt task to generate a cache buster version id in the asset files, and then we call usemin to replace the references of the original asset files for the ones with the version number to bust the cache. 我们使用grunt来构建资产，我们通常使用uglify，minify等。我们调用filerev grunt任务在资产文件中生成缓存buster版本id，然后我们调用usemin来替换原始资产文件的引用对于具有版本号的那些来破坏缓存。

The problem is that usemin only acts on elements with a src element, and because of the way I'm loading these assets now, it keeps the reference to the original asset name. 问题是usemin只对具有src元素的元素起作用，并且由于我现在加载这些资源的方式，它保留了对原始资产名称的引用。 This means I would have to manually change it after the build during releases, which is not acceptable. 这意味着我必须在发布期间在构建之后手动更改它，这是不可接受的。

So I'm looking for ways to make it work or alternatives but no luck so far. 所以我正在寻找方法让它工作或替代但到目前为止没有运气。

Answer 1

In my opinion, you should not be doing this in the first place. 在我看来，你不应该首先这样做。

You're loading all of your CSS after your HTML has been loaded and rendered on the page. 在页面上加载和呈现HTML后，您将加载所有CSS。 This means you will almost certainly have a flash of unstyled content . 这意味着你几乎肯定会有一些没有风格的内容。 To prevent this from happening, your styles should be intially loaded in your <head> 为了防止这种情况发生，您的样式应该在<head>初始加载

Note that window.onload waits for your document's window to be ready for presentation, meaning all external resources have been loaded. 请注意， window.onload会等待文档的窗口准备好显示，这意味着已加载所有外部资源。 If you have images on the page for example, your CSS and JS will not be loaded until all of your images have been loaded. 例如，如果页面上有图像，则在加载所有图像之前，不会加载CSS和JS。 This is most likely longer than you should be waiting to load your JS. 这很可能比您应该等待加载JS的时间更长。

Since <script> tags block the building of the DOM (since it needs to execute that JS), a better approach could be to use the async or defer attributes so you can still add the <script> tag to the end of your <body> but it will not prevent your page from being rendered. 由于<script>标签阻止了DOM的构建（因为它需要执行该JS），更好的方法是使用async或defer属性，这样你仍然可以将<script>标记添加到<body>的末尾<body>但它不会阻止您的页面被渲染。

There is such a thing as over-optimizing. 有过度优化这样的事情。 Is getting a better Pagespeed score worth degrading your user experience? 获得更好的Pagespeed得分值得降低您的用户体验吗？ That's up to you to determine, but I tend to learn towards "no" :) 这取决于你确定，但我倾向于学习“不”:)

Answer 2

Well, finally I was able to solve this. 好吧，最后我能够解决这个问题。 I used the filerev-apply grunt plugin which is applied to all string, not just those inside script elements with src properties as usemin seems to be doing. 我使用了filerev-apply grunt插件，它应用于所有字符串，而不仅仅是那些带有src属性的脚本元素，就像usemin 似乎正在做的那样。

It worked great 它运作得很好

I use grunt with aliases, so this is the filerev_apply.js task file: 我使用带有别名的grunt，所以这是filerev_apply.js任务文件：

module.exports = function(grunt, options) {
    return {
        dist: {
            files: [{
                '<%= dist %>/index.html': '<%= dist %>/index.html',
            }]
        }
    };
};

Call it after filerev and you are done. 在filerev之后调用它，你就完成了。

在优化Pagespeed之后，Grunt usemin无法正常工作

问题描述

2 个解决方案

解决方案1
0 2017-05-02 23:46:31

解决方案2
0 2017-05-03 16:20:16

在优化Pagespeed之后，Grunt usemin无法正常工作

问题描述

2 个解决方案

解决方案1 0 2017-05-02 23:46:31

解决方案2 0 2017-05-03 16:20:16

解决方案1
0 2017-05-02 23:46:31

解决方案2
0 2017-05-03 16:20:16