标签: bundling-and-minification

我创建了一些主题HtmlHelper扩展,用于获取主题目录中的.css和.js文件,并将它们动态注册为bundle.但是,如果主题仅包含.min.js文件,则Scripts.Render输出在调试模式下为空.

在调试模式下,有没有办法在Scripts.Render的输出中包含*.min.js文件？

当提供一个呈现捆绑脚本的简单页面时,我的asp.net MVC4 Web项目运行速度非常慢.但是,当我在页面上使用带有虚拟包路径的source属性的"硬编码"脚本标记时,性能要好得多:

@Scripts.Render("~/bundles/scripts")                            ~ 4 seconds

VS

<script src='@Scripts.Url("~/bundles/scripts")'></script>       < 1 second

我BundleConfig.cs没有特殊配置,这与它看起来完全一样:

bundles.Add(new ScriptBundle("~/bundles/scripts").Include(
    "~/Scripts/jquery-1.7.2.min.js",
    "~/Scripts/jquery.validate.min.js",
    "~/Scripts/jquery.validate.unobtrusive.js",
    "~/Scripts/jquery-ui-1.9.0.custom.min.js",
    "~/Scripts/bootstrap.min.js",
    "~/Scripts/bootstrap-modal.js",
    "~/Scripts/bootstrap-dropdown.js",
    "~/Scripts/bootstrap-tooltip.js",
    "~/Scripts/bootstrap-typeahead.js",
    "~/Scripts/bootstrap-transition.js",
    "~/Scripts/bootstrap-popover.js"));

我web.config甚至配置为在Debug中进行优化,但我尝试在Release模式下运行并仍然得到相同的结果:

<compilation optimizeCompilations="true" debug="false" targetFramework="4.0" />

任何想法为什么Scripts.Render这么慢？

我有以下内容

bundles.Add(new ScriptBundle("~/bundles/scripts/common").Include(
                  "~/Scripts/jquery.validationEngine.js",
                  "~/Scripts/common.js"));

哪个生成

<script src="/bundles/scripts/common?v=9O0Yi3fV_GWpGyJQ_QYURiOYy6SEmxUQtkUVN4GXo2U1"></script>

使用时渲染

    <asp:PlaceHolder ID="PlaceHolderJs" runat="server">                
            <%: Scripts.Render("~/bundles/scripts/common") %>
    </asp:PlaceHolder>

哪个不是有效的HTML,因为它缺少类型="text/javascript".如何使BundleCollection在脚本标记中输出此元素？

我过去在脚本引用的末尾加上"？v = n",如:

<script type="text/javascript" src="@Url.Content("~/Scripts/Foo.js")?v=2"></script>

每次我编辑.js时,我都会为该版本添加1,例如:

<script type="text/javascript" src="@Url.Content("~/Scripts/Foo.js")?v=3"></script>

我决定不能继续这样(我现在有太多的脚本),所以我开始使用ASP.NET MVC捆绑功能(BundleConfig, BundleCollection, RegisterBundles,等等).

实际上,版本会自动分配给捆绑包:

<script src="/Scripts/Bundles/Foo?v=EjpuCsTAfNN9NMv5E8hER41p25Zj9w6ncqWRsYdqQUY1"></script>

我的问题是:
该版本何时更改？我可以依靠吗？它在内部如何运作？

我可能错了,但有一次我不得不手动刷新浏览器以便更新脚本,因为我对脚本所做的微小更改没有对版本生效.

可能是什么导致了这个？
版本控制中是否考虑了微小变化？

1. 我是否可以指示Grunt连接index.html中定义的所有JS文件而不专门命名它们？
2. Grunt也可以创建新的index.html文件来加载连接的JS文件而不是之前的多个文件吗？
3. Grunt可以同时uglify JS文件吗？
4. Grunt不仅可以为JS文件执行此操作,还可以在给定的html文件中使用CSS文件吗？

我花了很多时间谷歌搜索,但Grunt生态系统似乎是如此分散,我不熟悉:(.

PS:我已决定使用Grunt,因为在WebStorm 8中有直接集成,但也许其他工具更适合这项任务？

我在IIS服务器虚拟目录上托管多个应用程序,我正在使用URL Rewrite来方便它们.像这样手动编写的所有图像和其他资源"~/path/to/my/content"都有正确的输出"/path/to/my/content",但是束路径之类"~/client/js"的输出"/myapplication/client/js"应该是"/client/js".

我该如何解决这个问题？

我如何启动脚本包:

var scriptBundle = new ScriptBundle("~/client/js");

重写配置:

<rule name="Official Website" stopProcessing="true">
               <match url="(.*)" />
               <conditions>
                  <add input="{HTTP_HOST}" matchType="Pattern" pattern="^(www\.)?domain\.com$" ignoreCase="true" negate="false" />
               </conditions>
               <action type="Rewrite" url="officialsite/{R:1}" />
            </rule>

正在调查这些主题,但无法让任何事情对我有用:

• 如何使用System.Web.Optimization包来处理IIS虚拟目录中的自定义文件夹？
• CssRewriteUrlTransform有或没有虚拟目录
• 为什么ResolveBundleUrl不适用于自定义文件夹？(MVC Beta 4)
• 是否有可能在MVC4中对BundleConfig进行单元测试？

更新:我使用Winhost作为托管服务提供商,他们不支持为IP设置主机头,可能是由于共享IP.它们提供了根文件夹的域指针,这就是我使用URL重写的原因.

我尝试过诸如Uglifyjs,babelli(babel-minify)之类的选项.似乎没有什么工作.Uglify会抛出这样的错误:

名称预期[au680.bundle.js:147541,22]

babelli也没有缩小代码.任何人都可以使用webpack 2,babel进行es6缩小的简单例子.可能是一个干净利落地完成工作的插件.

var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var AppCachePlugin = require('appcache-webpack-plugin');

var appConfig= require('./config.js');
console.log("appConfig is ->>>",appConfig);
var appPort = appConfig.APP_PORT;//Port on which the application is running

process.noDeprecation = true;
var ASSET_PATH = '/'
module.exports = function(options) {
  var entry, jsLoaders, plugins, cssLoaders, devtool;
  console.log('options webconfig-->', options, 'directory name', __dirname);

  // If production is true
  if (options.prod) {
    console.log('production minification');
    // Entry
    entry = {
       veris:path.resolve(__dirname,'./VerisInstrument/js/VerisApp.js'),
       au680 : path.resolve(__dirname,'./Au680Instrument/js/au680App.js'),
	   commondashboard:path.resolve(__dirname,'./CommonDashboard/js/CommonDashboardApp.js'),
       groups:path.resolve(__dirname,'./Groups/js/GroupsApp.js'), …

使用 rollup 和 postcss 插件，我可以将 CSS 注入到我的包中。但是，我的 CSS 引用了一些图像文件，例如background-image: url(./images/my-image.svg);.

如何配置 postcss/rollup 以url(...)用数据 URI替换 CSS 实例，从而将SVG嵌入到包中？

对于我的特定项目，我需要控制 CSS 的缩小，并且只缩小某些文件。我非常接近OptimizeCSSAssetsPlugin使用该assetNameRegExp选项来选择要缩小的 CSS 文件的工作解决方案。

我花了一段时间试图弄清楚为什么我的所有其他 CSS 文件仍然被缩小。事实证明，sass-loader将永远再压缩你的CSS时，在生产模式下您是否希望它与否。

这是我的完整webpack.config.js.

const CopyWebpackPlugin = require('copy-webpack-plugin');
const FixStyleOnlyEntriesPlugin = require('webpack-fix-style-only-entries');
const FractalWebpackPlugin = require('fractal-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const path = require('path');
const PrettierPlugin = require('prettier-webpack-plugin');
const StyleLintPlugin = require('stylelint-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');

module.exports = (env, argv) => {
    /**
     * Determine if is production mode from the command executed
     */
    const isProduction = argv.mode === …

在 Visual Studio 中缩小和捆绑 js/css 的官方祝福方式是什么？

直到去年，Bundler 和 Minifier 仍是Microsoft 推广的方式，但它已被放弃，并且存在一些重大问题需要启动。

那么，目前 Visual Studio 2019 中支持捆绑和缩小 JavaScript 和 CSS 的方式是什么？