Clever Geek Handbook

高速静的-Node.jsモジュールにより、作業がはるかに簡単になります

jsとcssを開発する場合、ファイルを元の形式に保つ方が便利ですが、本番環境ではファイルを縮小してマージする必要があります。 いくつかのビルドシステムがありますが、それらの使用は非常に難しく、問題があります。 少なくとも、私はコレクターを書くことにしたほど、彼らに飽きてきました。 それは非常に便利であることが判明したので、私はあなたとそれを共有することにしました。







私が戦うことにした別の問題は、htmlのファイルを接続することの利便性ではありませんでした。 1つのファイルを接続するには、次のように記述する必要があります。 

<script type="text/javascript" src="..."></script>




20個のファイルがある場合、これはすべて混乱に変わり、何かを見つけることが困難になります。 この場合、スクリプトとcssはページの異なる部分で接続する必要があります。 また、たとえばブートストラップを別のディレクトリにスローする必要がある場合は、ページの最初と最後でパスを変更する必要があります。 一般に、この方法でファイルを添付する方がはるかに高速になると判断しました。 



  <use> file1.css file2.js dir/ file3.js file4.css </use>


また、使用中にいくつかの素晴らしい機能を追加しました。 たとえば、現在のドメイン（ホスト）を挿入します。 しかし、私の歌はそれについてではありません。



タグを使用するだけで十分であり、ビルド構成でファイルを作成する必要はなく、表現するためにミドルウェアを作成する必要がありました。



つまり アセンブリはオンザフライで発生します。ブラウザが本番環境でファイルを要求すると、ディスク上の元の形式ではありますが、最小化されて返されます。 less、sass、coffeescript、jade、haml、mdの自動コンパイルを有効にしました。 これもオンザフライで発生します。



当然、これらすべてがサーバーの生産パフォーマンスに最良の方法で影響を与えるとは限りません。 したがって、実稼働環境では、結果はメモリにキャッシュされます。 それまでの間、彼はgzipの後に結果のキャッシュを追加しました（なぜCPUが無駄にロードされるべきか）。 ブラウザ側のキャッシュ（ETag）も利用できます。 一般に、標準の静的ミドルウェアであるExpress / Connectよりも高速であり、ディスクとストーンのロードが少なくなります。



標準ミドルウェアは、ファイル統計を2回取得し、ディスクからファイルを読み取り、結果を圧縮します。 私のものは、メモリからデータを吐き出すだけです。



数行で接続します 

  npm install fast-static
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     




  var fastStatic= require('fast-static'); app.use('/static',fastStatic.use('./static')); // app.use('/static',app.static('./static'));




次に、スクリプト/リンクの代わりに、htmlファイルでuseタグを使用します。



以上です。 envは販売されたサーバーで変更することを忘れないでください。



一般的に、便利な組立システムが得られました。



特徴







env = productionが最適化される場合





githubに関する完全なドキュメント： https : //github.com/Hkey1/fast-static



-

更新



新しいバージョンは、ディレクトリdir / *にinkludファイルが登場しました

シンプルな包含ライブラリがありました-useタグに名前とバージョンを追加するだけです。 たとえば、「bootstrap 3.1.1」

ブラウザ側のキャッシュを大幅に高速化しました。


More articles:


All Articles