javascript - 使用 .NET MVC 中的 Response.Filter 将所有 JavaScript 保留在页面底部

标签 javascript jquery asp.net-mvc performance filter

我已经加载了一些外部 JavaScript 和一些内联 JavaScript 以在我的 MVC 项目中查看页面。我听说过响应过滤器可以在内容加载后将这些脚本移动到页面末尾,但我对此并不了解。

如何在我的整个项目中实现这一目标?

最佳答案

我会使用构建任务(使用 Grunt 或 Gulp)将脚本组合并缩小为静态内容,并重写 HTML 以在页面中需要的位置包含 CSS 和 JS 资源。

您可以使用 Gulp 任务,例如 https://www.npmjs.com/package/gulp-uglify合并并缩小,然后 https://github.com/jonkemp/gulp-useref

整个任务看起来像这样:

gulp.task('html', function () {
    var assets = useref.assets();

    return gulp.src('app/*.html')
        .pipe(assets)
        .pipe(gulpif('*.js', uglify()))
        .pipe(gulpif('*.css', minifyCss()))
        .pipe(assets.restore())
        .pipe(useref())
        .pipe(gulp.dest('dist'));
});

除了缩小和组合资源之外,它还允许您定义要作为输出目标的 HTML 部分:

<html>
<head>
    <!-- build:css css/combined.css -->
    <link href="css/one.css" rel="stylesheet">
    <link href="css/two.css" rel="stylesheet">
    <!-- endbuild -->
</head>
<body>
    <!-- build:js scripts/combined.js -->
    <script type="text/javascript" src="scripts/one.js"></script>
    <script type="text/javascript" src="scripts/two.js"></script>
    <!-- endbuild -->
</body>
</html>

并将其重写为:

<html>
<head>
    <link rel="stylesheet" href="css/combined.css"/>
</head>
<body>
    <script src="scripts/combined.js"></script>
</body>
</html>

关于javascript - 使用 .NET MVC 中的 Response.Filter 将所有 JavaScript 保留在页面底部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32373175/

相关文章:

javascript - 防止 $(window).on('scroll function) 在 .click 函数之后触发

c# - 将下拉列表的值传递给 Javascript 变量

asp.net-mvc - 找不到自定义错误页面

jquery - 当文本框中没有任何内容时,如何将下拉列表重置回默认值?

javascript - 将数据从请求对象传递到模板node.js

javascript - 我如何将 csrf_token 包含到 dropzone Post 请求(Django)

javascript - 是否可以将 MVC C# List<int> 转换为 javascript 数组?

javascript - 为什么 JSLint 禁止 "this"关键字?

javascript - .load() 在检索内容时是否保留内联 JavaScript?

javascript - 根据编号创建行和列。动态出现的图像