标签: bundling-and-minification

我喜欢ASP.NET MVC 4.5中的Bundling和Minification,并且使用它很多.

但是,一个小问题是我们的"插件"托管在一个无Cookie域上,该域位于我的Visual Studio解决方案中的一个单独项目中.

我正在寻找一种解决方案,它允许我们的主站点请求捆绑和缩小的JS文件,其中包含来自cookieless站点的任意数量的插件.就像是:

http://my.cookieless.domain/plugins.js?include=alpha&include=bravo,charlie

到目前为止,我能找到的最佳解决方案是使用第三方捆绑和缩小库,考虑到ASP.NET内置了一个库,这看起来有些过分.

是否可以从内部控制器操作中手动调用ASP.NET捆绑/缩小过程？

public JavaScriptResult Index(IList<string> include)
{
    //bundle and minify JS
}

是否可以使用Web Essentials将所有javascript(或css)文件捆绑在一个目录中？类似于System.Web.Optimizations捆绑可以如何获取目录？

我试过了:

<directories>
   <directory>/myDirectory</directory>
</directories>

但这似乎不起作用.

我需要将AngularJS应用程序的文件夹中的所有文件捆绑在一起,并且不必担心添加每个新文件.

我想使用Web Essentials捆绑,以便生成源映射.

我遇到了font-awesome和ASP.NET的优化/捆绑功能的问题.

当EnableOptimizations设置为false时,我用于加载图像的字体可以完美地工作:

但是,当EnableOptimizations设置为true时,将不再找到该字体,并显示以下内容:

我注意到GET请求所遇到的路径之间存在差异:

EnableOptimizations = false:localhost:3620/Content/fonts/fontawesome-webfont.woff？v = 4.1.0 EnableOptimizations = true:localhost:3620/fonts/fontawesome-webfont.svg？v = 4.1.0

有问题的包看起来像这样:

bundles.Add(new StyleBundle("~/Content/BootstrapAndFontAwesome").Include(
    "~/Content/bootstrap/bootstrapLabel.css",
    "~/Content/font-awesome/font-awesome.css"
    ));

这里发生了什么,解决它的最佳方法是什么？

干杯

更新

关于Rowan在这篇文章的评论中的建议,我从这个stackoverflow的答案中实现了以下代码,它解决了我的dev机器上的问题:

public class CssRewriteUrlTransformWrapper : IItemTransform
{
    public string Process(string includedVirtualPath, string input)
    {
        return new CssRewriteUrlTransform().Process("~" + VirtualPathUtility.ToAbsolute(includedVirtualPath), input);
    }
}

我需要做一些练习部署以确保它是可靠的(例如使用虚拟IIS目录等).到目前为止看起来不错

请注意,我确实必须将font-awesome文件分离到它自己的bundle中,因为在采用CssRewriteUrlTransform解决方案时它不能与其他资源捆绑在一起.

谢谢.

如何从另一个文件夹(除了Script文件夹)使用JavaScript捆绑工作.如果我这样做:

bundles.Add(new ScriptBundle("~/bundles/search").Include("~/Views/Search/*.js"));

浏览器告诉我无法找到javascript文件.是否可以这样做或者我的所有sripts都必须在Scripts文件夹中？

基本上我希望我的Javascript包含在我的View子文件夹中

捆绑功能从MVC 6中排除,建议的方法是使用gulp任务进行捆绑.

使用捆绑,我们习惯在包含的css/javascript文件url(s)的末尾获取一个随机字符串.这个字符串非常重要,因为一旦你改变了css/javascript中的任何内容,就会生成一个新的字符串,这会强制浏览器加载文件的新版本.

所以,如果你有3个css文件,它们将捆绑成一个,它们看起来像这样:

<link href="/Style/css?v=sGJNctjkEuiEEdR68fh0dDt7bwrHIbu_EfQtgon7oYc1" rel="stylesheet">

我们如何在MVC 6中实现相同的功能？我不知道gulp是否能在这里提供帮助,但我已经在使用gulp进行缩小和捆绑.

我用Gulp来缩小我的整个js文件.一旦缩小,我得到如下错误:

[$injector:unpr] Unknown provider: eProvider <- e <- makeErrorsDirective.

我的控制器文件中有一个Custom指令.

var myhubdashboardControllers = angular.module('vpdashboardmodule', []);

.directive('mhDashboard', function ($http, authService, apiService) {
    return {
        restrict: 'EA',
        scope: {
            name: '@',
            dash: '@',
            report: '@',
            disname: '@',
            disdesc: '@',
            distot: '@'
        },
        templateUrl: 'views/dashboard/dashboard-direc.html',
        link: function (scope, element, attr) {
            scope.linkChk = scope.name;
            switch (scope.linkChk) {
                case 'Shipped This Week':
                    scope.url = 'erp/JobShipmentList/PostCpsVwShipmentCount';
                    scope.shipstatus = "Departure";
                    scope.period = "ThisWeek";
                    scope.basicfilter = "Open";
                    scope.linkName = "Shipments";
                    scope.linkDesc = "Shipped This Week";
                    break;

}); …

我一直在关注本教程:https://azure.microsoft.com/en-us/documentation/articles/cdn-serve-content-from-cdn-in-your-web-application/

直到我注意到,捆绑的脚本和CSS文件与返回的一切都是伟大的cache: no-cache,expires: -1和pragma: no-cache头.当然,这与Azure无关.为了证明这一点,我通过直接从我的网站访问它来测试捆绑,而不是CDN - 即.mysite.com/bundles/mybundle?v={myassemblyversion}.结果是一样的.当我禁用CDN并使用vMVC生成的查询字符串访问捆绑文件时,标头符合预期:公共缓存,到期时间为一年.

我试图实现IBundleTransform接口,但它context.BundleVirtualPath是只读的(即使它说获取或设置虚拟路径......).我也尝试修改响应标头Application_EndRequest(),但它也没有用.我的最后一个赌注是编写IIS出站规则,但由于我的bundle(与"custom"v查询字符串一起使用)不返回Last-Modified标题,所以这也是徒劳的尝试.

我的问题是:如果我希望将捆绑的文件缓存在客户端上,那么我如何使用Azure CDN绑定MVC - 也就是说,直到v查询字符串发生变化？

我们最近遇到了性能问题,突出了我需要确认的内容.

当您包含这样的包时:

@Scripts.Render("~/jquery)

这似乎正在运行(使用dotTrace确定,并看到它正在运行):

Microsoft.Ajax.Utilities.MinifyJavascript()

对于包含include的页面的每个请求,以及对脚本本身的调用.

我很欣赏在现实世界的场景中,只有1次点击脚本,因为客户端会缓存它.然而,至少可以说它似乎效率低下.

问题是,这是预期的行为,就好像它不是,我想解决它(所以任何建议),但如果是,我们可以预先缩小脚本.

UPDATE

因此,即使我将编译模式更改为debug,它仍然会触发minify方法.它输出各个网址,但仍然试图缩小它.

但是,如果删除对渲染方法的所有引用,它不会尝试缩小任何内容,并且不会快速运行,不会使应用程序池膨胀,也不会使Web服务器上的CPU最大化.

我在我的解决方案中有一组打字稿文件,我正在使用Visual Studio 2017中的typescript功能将这些文件编译为JS.我正在使用tsconfig.json文件.

我能够在VS或tsconfig中捆绑输出JS文件.

我可以使用WebEssentials缩小和映射*bundle.js.min回来*.bundle.js

在VS2017中编译,捆绑,缩小和映射的正确顺序是什么？

- project.csproj
  - scripts //output files
    - my.bundle.js
    - my.bundle.min.js
    - my.bundle.min.js.map
  - src //input files
    - mytypes.ts
    - mylogic.ts
    - mybaselogic.ts

(注意:我不想将WebPack,Babel或Grunt的负担添加到我的解决方案中)

在bundleconfig.json开发与生产环境中使用ASP.NET Core的最佳实践是什么？先前的Bundler(BundleCollection)会关注DEBUG编译器指令,而不是在调试时缩小脚本列表.

似乎新的范例是<environment>在HTML模板中有标记来测试ASPNETCORE_ENVIRONMENT值.虽然我没有看到将环境变量合并到bundleconfig.json工作流程中的方法.

我看到的一种方法是为每个包输出维护2个列表,bundleconfig.json缩小版本和非缩小版本,以便可以调试JavaScript.或者,我可以直接链接到开发<environment>代码中的非捆绑JavaScript ,然后引用production/staging <environment>标记中的捆绑和缩小版本.

无论哪种方式,都需要维护2个JavaScript文件列表(所有这些都适用于CSS文件).这似乎是向后退一步,在此之前你只需要维护一个源文件列表,而BundleCollection只会在适当的时候缩小.

我在这里遗漏了什么,或者我是否需要更进一步调查Gulp以便能够处理不同的环境？