标签: bundling-and-minification

我正在尝试使用Twitter引导程序在MVC 4中使用新的捆绑功能,在我看来,像css的字形png文件的路径以某种方式搞砸了.继承我的代码:

 bundles.Add(new StyleBundle("~/bundles/publiccss").Include(
            "~/Static/Css/bootstrap/bootstrap.css",
            "~/Static/Css/bootstrap/bootstrap-padding-top.css",
            "~/Static/Css/bootstrap/bootstrap-responsive.css",
            "~/Static/Css/bootstrap/docs.css"));


        bundles.Add(new ScriptBundle("~/bundles/publicjs").Include(
            "~/Static/Js/jquery-1.7.2.js",
            "~/Static/Js/bootstrap/bootstrap.js",
            "~/Static/Js/cookie/jquery.cookie.js"));

我没有在按钮上看到任何图标,同样如此.我在这里做错了吗？有什么建议？

我读了捆绑systemjs文档的部分内容,在HTTP/2中不再需要捆绑优化:

在HTTP/2上,这种方法可能更为可取,因为它允许在浏览器中单独缓存文件,这意味着不再需要对包进行优化.

我的问题:

1. 这意味着我们在使用HTTP/2时不需要考虑捆绑脚本或其他资源？
2. HTTP/2中有什么功能可以启用此功能？

ASP.NET 4.5具有很好的新捆绑功能,似乎对CDN的使用有一些支持.Microsoft提供的使用CDN捆绑功能的示例就是这样

public static void RegisterBundles(BundleCollection bundles)
{
  //bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
  //            "~/Scripts/jquery-{version}.js"));

  bundles.UseCdn = true;   //enable CDN support

  //add link to jquery on the CDN
  var jqueryCdnPath = "http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js";

  bundles.Add(new ScriptBundle("~/bundles/jquery",
            jqueryCdnPath).Include(
            "~/Scripts/jquery-{version}.js"));

  // Code removed for clarity.
} 

这似乎暗示您需要明确告诉它CDN上文件的路径.

CloudFront CDN(我假设许多其他人)为您提供了一个镜像您自己的子域.什么时候你打http://uniquesubdomain.cloudfront.net/js/myfile.js?v=1它起来http://mydomain.com/js/myfile.js?v=1

这样,您可以简单地为所有链接添加前缀,http://uniquesubdomain.cloudfront.net/并且您的文件是来自CloudFront的服务器.

ASP.NET 4.5捆绑功能是否与此类CDN兼容？是否有一种内置方法可以将捆绑功能的所有链接作为CDN域的前缀？

例如.

bundles.UseCdn = true;
var myBundle= new ScriptBundle("~/bundles/js", "https://uniquedomain.cloudfront.net/");
myBundle.Include("~/js/file1.js");
myBundle.Include("~/js/file2.js");

会导致

    <script src="https://uniquedomain.cloudfront.net/bundles/js?v=6y-qVPSK3RYOYHfPhOBDd92H4LjEjs-D3Hh2Yml6CXA1"></script>

当我使用标准MVC4模板创建我的项目时,包含了大量的javascript,例如:jquery-obtrusive,jquery-validate,knockout,整个jQuery UI.

这有多少值得保留,丢掉多少钱？我注意到当你创建一个强类型的控制器时,create.cshtml视图生成了调用:

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

这个文件到底是做什么的？我应该保留吗？我应该引用最初在BundleConfig.cs中定义的所有这些JS文件吗？或者我可以不打扰..？

我记得在 Next.js 12 中，dependencies和仍然遵循这个答案devDependencies的规则。但现在，当我输入 时，所有已安装的依赖项（无论它们仅用于开发还是同时用于开发和生产）都在 内。pnpm create next-appdependencies

// Next 12

  "dependencies": {
    "next": "12.1.2",
    "react": "17.0.2",
    "react-dom": "17.0.2"
  },
  "devDependencies": {
    "@types/node": "17.0.23",
    "@types/react": "17.0.43",
    "@types/react-dom": "17.0.14",
    "eslint": "8.12.0",
    "eslint-config-next": "12.1.2",
    "typescript": "4.6.3"
  }

// Next 13

  "dependencies": {
    "@types/node": "18.11.9",
    "@types/react": "18.0.25",
    "@types/react-dom": "18.0.8",
    "eslint": "8.27.0",
    "eslint-config-next": "13.0.2",
    "next": "13.0.2",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "typescript": "4.8.4"
  }

Next.js 13 会自动为我进行缩小吗？我应该不顾create-next-app建议而手动将它们分开吗？我在文档中找不到答案。

最近我看到Mvc 4已经将几个脚本和css捆绑和缩小到一个链接中,这个链接通过一个配置缩小和减少脚本加载时间.

require.js r.js也是一个可用于脚本加载和缩小的优化工具.谁能告诉我哪个更好？或者,如果require.js可以与minification + bundling工具一样使用,也可以将脚本加载到单个文件中？和Mvc 4一样吗？

我更喜欢使用require.js进行AMD加载,因此想要应用Mvc 4缩小概念的概念,如果它在require.js中可用作为脚本的单个url加载和用于优化和缩小的css.

有人可以为这个话题提出一些想法和建议吗？

我们正在使用ASP.NET Web Optimization Framework进行捆绑和缩小.一个包只包含jquery和modernizr.这一切都适用于jquery 1.8.3,但由于我们更新到1.9.0,组合jquery/modernizer包不再工作了.

bundles.Add(new ScriptBundle("~/st-scripts-load-first.js")
       .Include("~/Resources/JavaScript/jquery-1.9.0.js",
                "~/Resources/JavaScript/modernizr.form-placeholder.js"));

我们在目录中有jquery-1.9.0.js和jquery-1.9.0.min.js.如果没有.min文件,优化框架将自动生成一个.min文件.如果.min文件存在与否则它不起作用.
它适用于编译debug ="true"并且没有缩小或捆绑.

/* Minification failed. Returning unminified contents.
(5,2-3): run-time warning JS1195: Expected expression: *
(11,60-61): run-time warning JS1004: Expected ';': {
(395,2-3): run-time warning JS1195: Expected expression: )
(397,21-22): run-time warning JS1004: Expected ';': {
(397,4590-4591): run-time warning JS1195: Expected expression: )
(398,28-29): run-time warning JS1195: Expected expression: )
(398,84-85): run-time warning JS1002: Syntax error: }
(402,44-45): run-time warning JS1195: Expected expression: )
(408,1-2): run-time warning JS1002: Syntax error: …

我在BundleConfig.cs中配置了以下捆绑包:

bundles.Add(new StyleBundle("~/bundles/css").Include(
                      "~/assets/bootstrap/css/bootstrap.css",
                      "~/assets/css/global/all.css"));

我使用以下内容引用它:

@Styles.Render("~/bundles/css")

当我处于调试模式(web.config编译debug="true")时,它按预期工作,因为它将两个css文件呈现为正常,即:

<link href="/assets/bootstrap/css/bootstrap.css" rel="stylesheet"/>
<link href="/assets/css/global/all.css" rel="stylesheet"/>

但是,当我设置debug="false"上述行为仍然发生时,它确实识别文件,但它只是正常渲染它们.

为了确认捆绑绝对可行,我已经在BundleConfig中启用了优化,即 BundleTable.EnableOptimizations = true;

每当我执行上述操作时,它会捆绑css并按预期显示,即:

<link href="/bundles/css?v=WBKHkZAJly7jUzHrVDT8SwfaQE-CA9dbOUQUlLKadNE1" rel="stylesheet"/>

编辑:

有些人提到将以下代码添加到我的BundleConfig.cs文件中将实现我的目标:

#if DEBUG
            BundleTable.EnableOptimizations = false;
#else
            BundleTable.EnableOptimizations = true;
#endif

我理解并欣赏这个响应,但根据文档,MVC捆绑的默认行为是在发布模式下捆绑但不在调试模式下捆绑.我不明白为什么我应该添加额外的代码来使它在它应该已经完成​​时执行此操作.

编辑2

我忏悔了.事实证明我打开了Views文件夹中的web.config而不是主web.config.我更改了主web.config中的设置,这对我来说很好.我责怪ReSharper

有没有办法自定义Asp.Net MVC4捆绑和缩小功能缩小js文件的方式？

意思是,我不想完全关闭缩小,但"按原样"它只是打破了AngularJs.

由于AngularJs使用DI和IoC方法在控制器中注入服务,因此如下:

function MyController($scope) { }

一旦缩小,变为:

function MyController(n) { }

通常这不会有问题,但AngularJs使用参数名来了解要注入的服务.所以$ scope应保持$ scope,以及angular控制器中的任何其他参数.其他所有东西,如局部变量等,都应该正常缩小.

我找不到关于如何配置Mvc4缩小的任何明确的文档,它似乎相当愚蠢,因为它是"全有或全无",所以我想我错过了一些东西.

谢谢.

TL; DR:IItemTransform当缩小文件已存在于与原始(非缩小)文件相同的文件夹中时,未执行.

问题解释

我有这个问题主要是因为CSS相对图像引用.如果您使用IItemTransformJavascript文件,则同样适用.

这就是我正在使用的:

1. 我正在使用带有Web Essentials插件的Visual Studio来支持LESS文件
2. 我正在编写LESS文件,并且Web Essentials插件会在保存时自动缩小文件
3. 我也在我的项目中使用捆绑和缩小
4. 在创建CSS包时,我正在使用CssRewriteUrlTransformCSS URL绝对(即背景图像),以便在将几个CSS文件捆绑在一起后图像仍然可用

到目前为止没有什么不寻常的,但它不起作用.

什么似乎是问题？

捆绑和缩小工作的方式是它试图避免过度处理.这意味着当缩小文件与原始文件存在于同一文件夹中时,它将不会运行自己的缩小,而是提供现有文件.

只要它至少会对那些预先存在的缩小文件进行转换,这样就可以了.但事实并非如此.所以我最终得到了一个捆绑包中的相对URL,这几乎打破了所有这些资源.

解决方法

1. 始终在LESS文件中提供绝对路径
2. 在Web Essentials设置中保存时禁用文件缩小
3. 在定义我的软件包时请参阅缩小的文件,因为它们没有缩小版本(*.min.css没有*.min.min.css)所以minifier实际上会拾取文件并缩小,同时还运行转换它.

从我的开发过程和使用的工具(并按照它们的方式配置)的角度来看,这看起来像一个bug.如果这些文件是同一缩小过程的结果,那么这根本就不是一个错误,因为在缩小执行时将执行转换.确实,这样的功能不存在,并且可能永远不会因为应用程序需要写入权限才能使其工作.结果:这是一个错误.在缓存之前,应通过转换处理现有的缩小文件.

题

是否有可能以某种方式说服捆绑和缩小:

1. 不使用现有的缩小文件版本
2. 在现有的缩小版本上运行转换