标签: bundling-and-minification

我正在使用visual studio 11开发一个项目ASP.net 4,MVC4(RC).我正在尝试渲染一个呈现局部视图的MVC4 Razor视图.我的部分视图需要一些JavaScript.在我的部分视图中,当我在脚本部分中包含我的javascript,如下所示它似乎没有加载.

@section Scripts {
    <script type="text/javascript">
        $(function () {
            alert("test");
        });
    </script>
}

如果我删除脚本部分它失败,因为当文档就绪代码运行时,jquery库(在我的_Layout.cshtml页面上捆绑并呈现)尚未加载.

<script type="text/javascript">
    $(function () {
        alert("test");
    });
</script>

_Layout Page代码加载jquery库

@Scripts.Render("~/bundles/jquery")
@RenderSection("scripts", required: false)

有没有人知道这个解决方案,还是我只是错误的方式？它破坏了我的头!

有没有办法使用MVC4中的新捆绑功能捆绑单个文件？我知道捆绑单个文件没有多大意义但是我想使用服务器端缩小,并让MVC在URL的末尾添加一个哈希值以用于缓存目的.

我试过了,@Scripts.Url("~/Scripts/myscript.js")但似乎不起作用.

使用内置的MVC4捆绑器,如何将我的CDN URL添加到它生成的链接标记中？我已经设置了Amazon Cloudfront,以便在首次请求时从我的网络服务器中提取资产.所以当我定义一个这样的包时:

 bundles.Add(new StyleBundle("~/Content/css").Include(
    "~/Content/reset.css",
    "~/Content/960_24_col.css",
    "~/Content/Site.css"
 ));

部署后,我可以这样引用它:

http://[cloundfrontid].cloudfront.net/Content/css?v=muhFMZ4thy_XV3dMI2kPt-8Rljm5PNW0tHeDkvenT0g1

现在我只需要将Bundler生成的链接更改为相对于指向我的CDN的绝对链接.

  <link href="[INSERT_CDN_URL_HERE]/Content/css?v=muhFMZ4thy_XV3dMI2kPt-8Rljm5PNW0tHeDkvenT0g1" rel="stylesheet"/>

我认为可以使用IBundleTransform重写路径,但我找不到任何这方面的例子.

注意:为了清楚起见,我知道您可以为捆绑包指定CDN链接,但只有在捆绑包可以被静态链接替换时才有效.

我们有一个MVC应用程序,使用IBM应用程序扫描由第三方公司扫描安全问题.问题是,例如,由于Bundling和Minification,我们遇到了多个问题

整点是捆绑和缩小将缓存样式表和javascript文件.不幸的是,我们不会在不解决这些问题的情况下签字.关于如何通过这个的任何想法？

我搜索了SO - 发现了许多相同的问题,但没有一个答案有帮助.

我已经建立了一堆网站,而不是之前遇到过这个问题.

基本上,我的脚本包为我的javascript文件夹中的每个文件生成404.

我的结构(此刻,我已经改变了一堆!)看起来像这样:

我这样做,所以我可以保证ASP.Net不会改变顺序 - 我可以确保某些脚本领先于其他脚本.这就是我一直这样做的方式,通常效果很好.

我的捆绑脚本 - 目前 - 是:

        public static void RegisterBundles(BundleCollection bundles)
        {
            bundles.FileSetOrderList.Clear();
            // stlyes
            StyleBundle cssBundle = new StyleBundle("~/bundles/css");
            cssBundle.IncludeDirectory("~/content/css", "*.css", true);
            bundles.Add(cssBundle);


            //scripts
            ScriptBundle jsBundle = new ScriptBundle("~/bundles/jscript");
            jsBundle.IncludeDirectory("~/content/javascript", "*.js", true);
            bundles.Add(jsBundle);

        }

我尝试过一大堆虚拟路径.

我的CSS加载完美.我的Js - 我得到404的清单; 每个*/js文件一个.

有任何想法吗？

我的控制台看起来像这样 - 这也告诉我bundles.FileSetOrderList.Clear();实际上并没有清除它的列表,否则我会在角度之前有jquery(这是我的意图)

UPDATE

如果我BundleTable.EnableOptimizations = true;在我的捆绑包中然后它全部捆绑,缩小和工作 - 虽然这很糟糕的开发调试 - 究竟是什么阻止它在调试模式下工作？!

是否可以在ASP.NET MVC中将另一个包中包含一个包？

我想做的事情如下:

bundles.Add(new ScriptBundle("~/bundles/jquery").Include("~/Scripts/jquery-{version}.js"));
bundles.Add(new ScriptBundle("~/bundles/jquery-ui").Include("~/Scripts/jquery-ui-{version}.js"));
bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include("~/Scripts/jquery.validate*"));
bundles.Add(new ScriptBundle("~/bundles/knockout").Include("~/Scripts/knockout-{version}.js").Include("~/Scripts/knockout.ext.js"));
bundles.Add(
    new ScriptBundle("~/bundles/ui")
    .Include("~/bundles/jquery")
    .Include("~/bundles/jquery-ui")
    .Include("~/bundles/jqueryval")
    .Include("~/bundles/knockout")
    );

browserify构建模块化js应用程序时,Nodejs 非常棒.如果gulp也是设置的一部分,工作流程进一步增强,以管理和解决依赖关系,正确捆绑,uglify与源图,自动polyfill,jshint,测试...这对于CSS和预处理非常方便,自动添加前缀,linting,嵌入资源和生成文档.

TL; DR:使用npm/bower,您可以访问广泛的前端库生态系统,使nodejs非常适合构建(不一定是服务!)客户端代码.实际上,将它用于客户端代码是非常棒的npm,bower并且grunt/ gulp将在VS 2015中开箱即用.同时,我们已经设置了一个运行预构建和写入dist js/css的gulp任务. (捆绑输出).

使用指纹网址引用外部静态内容的好方法是什么？从长远来看,我们理想情况下能够完全分离客户端内容,以便可以独立构建并部署到CDN,而无需构建应用程序的其余部分.

我有两个问题.

我正在尝试学习RequireJS并将其与ASP.NET MVC捆绑和缩小一起使用.我正在为RequireJS使用一个单独的配置文件来保存捆绑信息.我的第一个问题是如何将MVC生成的包路径传递给require.config.js文件.干净的方法如下:

index.cshtml

<script id="requirescript" type="text/javascript" src="~/Scripts/require.config.js"
    data-baseurl="@Url.Content("~/Scripts")"
    data-bundlepath="@System.Web.Optimization.Scripts.Url("~/bundles/scripts").ToString()"></script>

require.config.js

var reqScript = document.getElementById('requirescript');
var baseUrl = reqScript.getAttribute('data-baseurl');
var bundlePath = reqScript.getAttribute('data-bundlepath');
var require = {
    baseUrl: baseUrl,
    bundles: {
      bundlePath : ['jquery','jqueryui','mymodule']
    }
  }
};

当我执行上述操作时,RequireJS尝试加载一个名为bundlePath.js的不存在的脚本,而我想要的是加载包含我的模块的捆绑脚本'/ bundles/scripts？v = GZ0QWPB4G0soItEmlsPC6Yp3zftCRVleVTcH3LseMWo1'.首先,我的问题是如何将require服务器生成的包URL传递给require.config.js文件中的RequireJS,而不对包路径进行硬编码？

其次,jqueryui模块似乎没有加载.我在jquery ui min文件中的AMD代码中添加了模块名称.如何让jquery ui与RequireJS和ASP.NET捆绑一起工作？

我有一个中小尺寸(约28 KB,包括(TypeScript编译)JS + HTML模板)Angular 2应用程序.

它最初基于angular.io快速入门,但现在我使用JSPM进行捆绑/缩小以进行部署.

我得到的捆绑JS文件是2.1 MB,当使用gzip压缩时,它下降到449 KB.

这仍然相当大,我想问一下如何最好地减少用于部署的应用程序的总体大小,以最小和最有效的捆绑方式交付我的应用程序.

编辑:我应该提一下,我通过单独导入RxJS运算符,将未压缩但缩小的捆绑包大小减少到1.9 MB,例如import 'rxjs/add/operator/map';:所以,除了那之外我还会寻找任何规模的节省.

非常感谢您的帮助.

我正在尝试使用 esbuild 在 npm 项目中捆绑和缩小我的文件。它正在最小化我传入的每个文件，但它不是捆绑。它给了我一个错误，当有多个文件时，我必须使用“outdir”。但是，这使我将所有这些文件返回到一个文件夹中，并将其最小化。这不是我想要的行为，也不是捆绑。我只是想让它把所有这些文件合并成一个。

let {build} = require("esbuild");
let files = ["file1.js", "file2.js"];

build({
    entryPoints: files,
    outdir: "./views/dashboardPage/bundle",
    minify: true,
    bundle: true
}).catch(() => process.exit(1));

我将 bundle 设置为 true，但它仍然要求我使用 outdir，它只是将这些文件返回给我，并最小化。他们基本上有 0 个关于此的文档，并且关于它的每个在线帖子都只是从 GitHub 复制/粘贴了自述文件。我怎样才能让它捆绑？