Question

在网络前端处理大量JS的最佳方法是什么？谷歌的Closure编译器可以编译和缩小JS，这对于生产来说很有用 - 但是每次我做出更改时都需要重新编译，并且很难调试。

将JS组织成多个文件的最佳方法是什么？

Answer 1

实际上有两个问题：如何避免在开发中重新编译以及组织许多js文件的最佳方法。

第一个问题的简单答案是在模板中为生产/开发模式设置变量。在伪模板代码中，它可能看起来像这样（例子很粗糙，当然最好使用像LABjs等脚本加载工具）。

{if mode == 'production'}
  <script src="allmyscripts.min.js"></script>
{elseif mode == 'development'}
  <script src="lib.js"></script>
  <script src="plugin1.js"></script>
  <script src="plugin2.js"></script>
  <script src="script1.js"></script>
{/if}

因此，您只需在切换到生产模式时进行编译。

第二个问题要复杂得多，答案往往是自以为是。您可以尝试使用强加自己的文件结构的现有工具，例如JavascriptMVC或更轻量级RequireJS。

Answer 2

关于javascript压缩的'烦恼调试'部分，我的代码中发生了两件事情，只有当项目处于调试状态时我才能提供非压缩文件，这样我就不会在对文件进行任何更改后，必须重新构建javascript压缩项目。另外，如果您正在使用IE（并且喜欢它？），IE9具有javascript调试的“漂亮打印”功能，应该解压缩（显然不会修复混淆）。

Visual Studio中的MSBuild任务与YUI Compressor for .NET相结合，可以为您进行javascript / CSS压缩和缩小。我有一个'静态'项目，我的javascript，CSS和图像都在这里，所以当我修改我的javascript / CSS时，我构建了这个项目，它使用YUI压缩器来组合和缩小我的文件。通过这种方式，我可以将我的javascript和css文件分开，但无需使用手动工具压缩它们即可将它们一起提供。

在Project属性中，在Build Events下，我把它放在“Post-build event命令行”中：

/p:SourceLocation="$(ProjectDir)"
$(MSBuildBinPath)\msbuild.exe "$(ProjectDir)MSBuild\MSBuild.xml"

示例MSBuild.xml文件:(我有3 Compressor Tasks以便我可以获取特定的文件组）

<?xml version="1.0" encoding="utf-8"?>
<Project xmlns="http://schemas.microsoft.com/developer/MsBuild/2003">
  <UsingTask
      TaskName="CompressorTask"
      AssemblyFile="Yahoo.Yui.Compressor.dll" />
  <Target Name="MyTaskTarget">
    <ItemGroup>
      <CssFiles Include="$(SourceLocation)..\css\Style.css"/>
      <CssFiles Include="$(SourceLocation)..\css\StylePrint.css" />
      <JavaScriptFiles Include="$(SourceLocation)..\scripts\general\*.js" />
    </ItemGroup>
    <CompressorTask
        CssFiles="@(CssFiles)"
        DeleteCssFiles="false"
        CssOutputFile="$(SourceLocation)..\css\Style.min.css"
        CssCompressionType="YuiStockCompression"
        JavaScriptFiles="@(JavaScriptFiles)"
        ObfuscateJavaScript="True"
        PreserveAllSemicolons="False"
        DisableOptimizations="Nope"
        EncodingType="Default"
        DeleteJavaScriptFiles="false"
        LineBreakPosition="-1"
        JavaScriptOutputFile="$(SourceLocation)..\scripts\general.min.js"
        LoggingType="ALittleBit"
        ThreadCulture="en-us"
        IsEvalIgnored="false"
            />
  </Target>
</Project>

Here is another guide to do compression/minification as MSBuild task

希望有所帮助

Answer 3

也许这个会有所帮助

How to automate JavaScript files compression with YUI Compressor?

维护中型到大型的JS重型网络应用程序

3 个答案: