标签: bundling-and-minification

背景

我正在尝试创建一个“无构建”JavaScript 应用程序，在该应用程序中，每次保存任何源文件时，我都不需要watch运行任务来转译 JSX、重新捆绑代码等。

它仅适用于第一方代码，但当我尝试import从 npm 获取依赖项时，我陷入了困境。

目标

我想实现这样的工作流程：

1. npm install foo（假设它是一个 ES 模块，而不是 CommonJS）
2. 编辑source/index.js并添加import { bar } from 'foo'
3. npm run build。某些东西（webpack，rollup，自定义脚本，等等）运行，并将foo其捆绑及其依赖项./build/vendor.js（没有来自 的任何内容source/）。
4. 编辑index.html添加<script src="build/vendor.js" type="module"...
5. 我可以source/index.js在浏览器中重新加载，然后bar就可以使用了。npm run build直到下次添加/删除依赖项时我才必须运行。

我已经让 webpack 将依赖项拆分为一个单独的文件，但要import在无构建上下文中从该文件中，我必须import { bar } from './build/vendor.js. 那时 webpack 将不再捆绑bar，因为它不是相对导入。

我也尝试过Snowpack，它在概念上更接近我想要的，但我仍然无法配置它来实现上述工作流程。

我可以编写一个简单的脚本来将文件从node_modulesto复制 …

我正在迁移到 Bootstrap 5.0.2 并清理捆绑以进行优化。由于对各种旧浏览器版本的支持已被弃用，并且 Modernizr.js 自 2017 年以来就没有更新过，这一行是否仍然有必要？

@Scripts.RenderFormat("<script type=\"text/javascript\" src=\"{0}\" async></script>", "~/bundles/modernizr")

这个问题似乎或多或少与这个问题重复，但那个问题没有收到答案，而且已经有两年多了，所以我不知道协议是什么（我试图找出答案）。

不管怎样，我已经编写了一个 ASP.NET MVC5 Web 应用程序，并且在调试中一切正常。使用发布配置发布到服务器后，我开始看到错误“未捕获的引用错误：初始化之前无法访问'n'”。

经过几个小时的代码搜索后，我想我已经隔离了这个问题。我有这个小函数（它是一个 Knockout 视图模型，但这无关紧要）：

eventIndexViewModel = function (params) {
    let self = this;

    // Map values from params object to properties of self
    for (const [key, value] of Object.entries(params)) {
        self['_' + key] = value;
    }

    self.eventsView = ko.observable(self._eventsView);
    self.calendarToggleButtonClass = ko.pureComputed(function () {
        return self.eventsView() === "calendar" ? "active" : "";
    });
    self.tableToggleButtonClass = ko.pureComputed(function () {
        return self.eventsView() === "table" ? "active" : "";
    });
};

缩小并发布到服务器后，如果我在开发工具控制台中查看源代码，它看起来像这样：

eventIndexViewModel = …

当我部署一个网站（具有多个入口点、许多 HTML 文件）并且主机使用构建命令：parcel build index.html aboutme.html. 部署的网站给我一个 404 错误。但如果我在 URL /aboutme.html 或 /index.html 中写入，就会出现...这就像一个路由问题。

HTTP://localhost:1234 => 404 错误，
HTTP://localhost:1234/aboutme.html => 正常。

有 1 个入口点，一切正常，但我想要多个 HTML 文件。

我搜索过在线命令，例如：

"build:client": "parcel build client/index.html --out-dir dist/client",

或者

 "build:server": "parcel build server/index.js --target node --out-dir dist/server",

甚至更多使用这个奇怪的标志命令：--watch

我理解并完全理解新的bundle通配符{version}正则表达式,因为即使在更新后它也会继续拾取你的脚本和样式库.问题是我无法让它有效地工作.

我之前使用以下表示法来获取我的jQuery脚本:

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
            "~/Scripts/jquery-1.*"));

它会拾取与星号通配符匹配的所有文件.

但是,当我尝试以下内容时:

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

我注意到jQuery文件没有写到_Layout.cshtml页面.

注意 - 我确实在两个示例中使用以下HTML代码:

@Scripts.Render("~/bundles/jquery")

当我使用上面的第一个例子("*")表示法时,会将以下内容写入页面:

<script src="/Scripts/jquery-1.7.2.js" type="text/javascript"></script>

但是,当我使用"{version}"表示法时,只有一个空的空间,应该写入库.这适用于jquery文件以及相关的CSS样式表.

无论我是在编译DEBUG还是RELEASE模式都没关系.结果是一样的.显然在发布模式下,我会在使用"*"表示法时获得优化版本:

<script src="/bundles/jquery?v=VUv2YOeuOgHad-FHZ-vGMDu9wN1j9VZGifI1SBUUSMs1" type="text/javascript"></script>

因此,作为所有开发人员的完美主义者,我非常希望看到{version}符号对我有用,因为我确实了解新版本并希望对我的部署进行此控制.

非常感谢任何洞察我可能做错的事情.

提前谢谢,丹

我设置时遇到这个奇怪的问题:

BundleTable.EnableOptimizations = true;

当我尝试打开我的网站时,它无法加载,当我打开Chrome控制台时,我看到以下消息:

GET/localhost/bundles/scripts/angularjs/commonmodules？v = 13-uWpwzN3U6kiHVssXRdpywHxrn09twvYKwoDVN3SU1 404(未找到)

但是,如果我尝试打开chrome控制台上显示的链接,它加载得很好,换句话说,当我尝试直接打开它时找到链接,但是当页面尝试时,服务器(IIS 7.5)返回404通过标签链接它.

有没有人经历过这种奇怪的行为？

我的包的虚拟路径不映射任何现有文件或目录,我使用以下代码包含它们:

var myBundle= new ScriptBundle("~/bundles/scripts/angularjs/bootstrapping");
bootstrapping.Include("~/app/app.js")
    .Include("~/app/config.js")
    .Include("~/app/config.exceptionHandler.js")
    .Include("~/app/config.route.js");
bundles.Add(bootstrapping);

我已经尝试在web.config的system.webServer上添加以下行:

<modules runAllManagedModulesForAllRequests="true">
    <remove name="BundleModule" />
    <add name="BundleModule" type="System.Web.Optimization.BundleModule" />
</modules>

我不确定这可能是相关的,但我在这个网站上使用Umbraco v7,这只有在我将EnableOptimizations设置为"true"时才会发生.

从VS 2013.2RTM Pro,MVC 5.1应用程序运行调试.

如果编译模式设置为debug ="true",则应该禁用Bundling和minification,但它不会.当我检查页面上的View源时,样式和脚本是捆绑在一起的.
<script src="/bundles/modernizr?v=K-FFpFNtIXjnmlQamnX3qHX_A5r984M2xbAgcuEm38iv41"></script>

如果我BundleTable.EnableOptimizations = false;在BundleConfig.cs中设置它会禁用捆绑和缩小,但这不是它应该如何工作.我不应该记得切换EnableOptimizations设置!

事情在VS 2012 MVC 4应用程序中正常运行.

这是一个MVC 5.1错误吗？有没有其他人有这个问题？有没有办法让调试禁用捆绑和缩小？

web.config:

  <system.web>
    <authentication mode="None" />
    <compilation debug="true" targetFramework="4.5" />
    <httpRuntime targetFramework="4.5" useFullyQualifiedRedirectUrl="true" maxRequestLength="100000" enableVersionHeader="false" />
    <sessionState cookieName="My_SessionId" />
  <httpModules>
      <add name="ErrorLog" type="Elmah.ErrorLogModule, Elmah" />
      <add name="ErrorMail" type="Elmah.ErrorMailModule, Elmah" />
      <add name="ErrorFilter" type="Elmah.ErrorFilterModule, Elmah" />
    </httpModules>
  </system.web>

_Layout.cshtml:

在标题中

@Styles.Render("~/Content/css") @Styles.Render("~/Content/themes/base/css") @Scripts.Render("~/bundles/modernizr")

在身体的尽头

@Scripts.Render("~/bundles/jquery") @Scripts.Render("~/bundles/jqueryui") @Scripts.Render("~/bundles/jqueryval")

我们正在开发一个主WebApp,其中angularJS作为Cordova移动应用程序的单页应用程序.

我们已将部分静态资源移动到几个捆绑包中,这些捆绑包将从另一个域的不同CDN WebApp提供.

我们没有使用@Scripts.Render @Styles.Render剃刀助手,因为捆绑包是直接从移动应用程序内部的嵌入式静态index.html引用的(通过AngularJS附加):

<script src="https://service.foo.it/CDN/cdnFooJs"></script>
<script src="https://service.foo.it/CDN/cdnFooCss"></script>

因为我们没有使用剃刀,所以我们不会将任何缓存令牌附加到src,这不是我们想要的; 我们需要一个版本令牌来强制客户端下载更新版本的捆绑包.
我在之前的一些帖子中读到,v每次使用Scripts.Render时都会计算令牌.

现在,问题是:
是否有可能以编程方式访问此令牌的值？

我们想创建一个服务控制器,给定一个bundle路由,返回bundle的SHA256令牌.
收到后,它将用于构建脚本标记,这些标记将以动态方式附加到DOM.

<script src="https://service.foo.it/CDN/cdnFooJs?vtoken=asd3...."></script>
<script src="https://service.foo.it/CDN/cdnFooCss?vtoken=dasdasrq..."></script>

注意:
我们已经知道我们可以自己创建令牌(例如使用内部版本号),但是拥有更少工作量并且更多地绑定到捆绑机制会更好.

我想在整个网站上使用内容安全策略(CSP).这要求所有JavaScript都在单独的文件中.我共享了所有页面使用的JavaScript,但还有一些特定于页面的JavaScript,我只想为特定页面运行.处理页面特定JavaScript以获得最佳性能的最佳方法是什么？

我可以想到解决此问题的两种方法是使用特定于页面的JavaScript包或带有switch语句的单个JavaScript包来执行特定于页面的内容.

目前正在ASP.NET MVC应用程序中工作，探索了角度之后，我对在ASP.NET MVC应用程序中使用Webpack进行捆绑和缩小感到很兴奋。

遵循了webpack指南中的所有步骤，我能够捆绑并缩小js文件。

但是，当我在应用程序中引用该捆绑包时，它比ASP.NET捆绑包花费更多的时间。

下面是ASP.NET捆绑代码

 bundles.Add(new ScriptBundle("~/bundles/QuickReasonEntryScripts").Include(
                  "~/Scripts/jquery.min.js",
                  "~/Scripts/kendo.all.min.js",
                  "~/Scripts/bootstrap.js",
                  "~/Scripts/ComonLibrary.js",
                  "~/Scripts/Common.js",
                  "~/Scripts/CommonFunctions.js",                      
                  "~/Scripts/QuickReason.Events.js",
                  "~/Scripts/QuickReason.Ajax.js"
          ));

在cshtml文件中像下面这样引用

 bundles.Add(new ScriptBundle("~/bundles/QuickReasonEntryScripts").Include(
                  "~/Scripts/jquery.min.js",
                  "~/Scripts/kendo.all.min.js",
                  "~/Scripts/bootstrap.js",
                  "~/Scripts/ComonLibrary.js",
                  "~/Scripts/Common.js",
                  "~/Scripts/CommonFunctions.js",                      
                  "~/Scripts/QuickReason.Events.js",
                  "~/Scripts/QuickReason.Ajax.js"
          ));

以下是请求时间。

Asp.net捆绑脚本仅花费411毫秒，webpack捆绑文件仅花费2.87s

无法理解为什么静态文件需要更多时间。

如何优化呢？我想念什么吗？

谢谢，Badrinarayana