次世代バンドルツールの競争の今 Turbopack vs Vite - GMOインターネットグループ グループ研究開発本部
こんにちは。グループ研究開発本部 次世代システム研究室のH.Oです。 生産的なアプリケーション開発において欠かせないものの一つにフロントエンドのJavaScriptバンドルツールがあります。 これまで、長年に渡ってJavaScriptのバンドルツールはwebpackがデファクトスタンダードとなり、Next.jsやNuxt.jsなどフレームワークにもデフォルトで組み込まれていました。その高機能性と安定性から現在も多くのWebサービスで利用されています。 一方で近年、webpackに続く次世代バンドルツールの開発競争が大きな注目を集めています。その中で特にwebpackに取って代わる勢いを見せているものにViteとTurbopackがあります。これらは、開発するアプリケーションの肥大化に伴って処理が遅くなってしまうwebpackの問題点を解決することが主要目的となっています。 今回はViteと
[Web フロントエンド] esbuild が爆速すぎて webpack / Rollup にはもう戻れない - 株式会社カブク
TypeScript + Preact + Material UI + material-table で作っている管理画面のビルドツールを Rollup から esbuild に変えたお話です。 2021/01/07 追記 esbuild に新しく CSS ローダーやプラグイン機構が実装されたので紹介記事を書きました！ esbuild の機能が足りないならプラグインを自作すればいいじゃない https://www.kabuku.co.jp/developers/create-your-own-esbuild-plugin はじめに これまでの JavaScript ビルドツールと私 以前は私も定石通り「アプリには webpack、ライブラリには Rollup」をビルドに利用していましたが、近年はアプリのビルドにも Rollup を利用することが多くなり、 webpack を利用することはな
Webpackの70倍！Go言語で書かれたJavascriptバンドラー「esbuild」をベンチマークテストしてみた
Webpackの70倍！Go言語で書かれたJavascriptバンドラー「esbuild」をベンチマークテストしてみた esbuild https://github.com/evanw/esbuild/ esbuildの特徴 複数モジュールの依存関係を解決し、1つにまとめるバンドラーは、現代のフロントエンド開発においてなくてはならないツールの1つ。 The State of JavaScript 上位5つに人気が集中し、なかでもWebpackのシェアは実に約60%に達しています。 今回ご紹介する「esbuild」は、Go言語で書かれた高速なバンドラーで、これらメジャーなツールとの性能比較（ベンチマークテスト）をやってみました。 公式のベンチマーク結果 計測方法は、three.jsライブラリを10回複製し、キャッシュなしで単一のバンドルをゼロから構築しています。なんと、Webpackに比べて
Vueのテンプレートでassetsのimageを使う（rails + webpacker） - 継続的ブログ
assets/images 下の画像をVueのtemplate内で使いたい。 erb内でなら image_tag で行けるが、digestついてるので単に <img src="assets/images/image.png" />とはできない。 解決法 調べたらいくつか方法はありそうだったが、webpackerのドキュメントを読むと、 config/webpacker.yml の resolved_paths を利用すればいいっぽい。 github.com Note: Please be careful when adding paths here otherwise it will make the compilation slow, consider adding specific paths instead of whole parent directory if you just
rails/webpackerを使ってRailsで定義した定数をTypeScript(JavaScript)内で使う - こんがりぃ
環境 Rails5.1.4 rails/webpacker 3.2.1 公式のdocumentにあるerb-loaderを利用する。 https://github.com/rails/webpacker#erb ubuntu@ubuntu-xenial:~/rails/yuyuyui$ bundle exec rails webpacker:install:erb rails aborted! Don't know how to build task 'webpacker:install:erb' (see --tasks) taskがないと言われた（この時点ではrails/webpacker 3.0.1あたりだった）。webpackerをupgradeする ubuntu@ubuntu-xenial:~/rails/yuyuyui$ bundle update webpacker ubun
フロントエンド原理主義者が目論んだ脱webpacker
webpacker脱出を表現した絵画初めに脱webpackerアドバイザーの小宮山です。最近の趣味は相変わらずランニングですが、下の階のヌーラボさんにインスパイアされてボルダリングにも夢中になりつつあります。 フロントエンド原理主義とはサーバーサイドからフロントエンドへの干渉（特にレンダリング）を嫌う一派に私が勝手に名前を付けただけです。ただしSSRはこの限りでは無いので最近は結構曖昧になりつつあります。 動機webpack関連のアップデートがwebpacker対応待ち最大のデメリットはやはり、webpack関連のアップデートがwebpacker対応待ちになってしまうことでした。どんなにwebpack4が3から進化しているとしても、導入するにはレールとなるwebpackerが対応してくれるのを待つしかありません。 そしてwebpackerが対応してくれたら即導入なんてうまくいくはずがなく、
Steb by Step で剥がす Webpacker - 30歳からのプログラミング
この記事では、Webpackerを使っている Rails アプリからWebpackerを剥がし、webpackを使うようにするための手順を書いていく。 Webpackerを止めたい理由は様々だが、主な理由は以下のような感じだろうか。 現時点ではWebpackerが使用しているwebpackのバージョンは3.xで、最新バージョンに追従できていない webpackの設定の他に、「Webpackerの設定」について学ばなければならず、無駄が多い webpackを直接触れば済む話を、常にWebpackerという仲介者を通して作業しなければならない カスタマイズやマイグレーションの際に、考慮しなければならない要素が増えてしまう 手軽にフロントエンド開発環境を導入できる、というのがWebpackerの利点であり、カスタマイズやらアップデートやらが必要になってしまうのならあまりメリットはない、と個人的に
Webpackerをやめるならwebpack_manifestというgemが便利、という話
先日、社内のSlackでpixivさんのブログ記事 今日から簡単！Webpacker 完全脱出ガイド がシェアされてて、『あっ、これは...弊社でもやったやつではないか。』とおもいました。Webpackerは便利なんですけどね。 本記事はこのpixivさんのポストを受けて WebpackManifest というgemを紹介します。 ラクスルでのWebpackerを辞めた経緯 もともとWebpackerを使った管理画面プロジェクトがあった そこにECサイトも乗せるようなった package.jsonは管理画面、ECサイトで分けて管理したかった Webpackerは1個のpackage.json、1個のwebpackコマンド、1個のmanifest.json前提の作りなので、package.json分けて複数のwebpackビルド処理系を作りたいラクスルの用途に合わなかった => 脱Webpa
Webpackerを導入してから外すまでをふりかえる - 弥生開発者ブログ
こんにちは、@mugi_unoです。 MisocaでjQuery製のフロントエンドコードを書き換え続けていた結果、技術書典6に参加することになりました。現在必死で書いております。 farewell_webpacker さて、先日とあるブランチがmasterにマージされ、リリースされました。 farewell : ごきげんよう！、さらば！ farewellの意味・使い方・読み方 | Weblio英和辞書 farewell_webpacker です。 長い間フロントエンドのビルドにはRailsのGemであるWebpackerを使ってきましたが、現在は完全に依存を外しており、純粋なwebpackビルドを行う形に書き換えました。 正直なところ、フロントエンド界隈からは否定的な意見を聞くことも多いWebpackerですが、実際にある程度の期間プロダクションで利用してみて、良いところも辛いところも両方
webpackのbundle後のJavaScriptのサイズを減らしている話 | リクルートテクノロジーズ メンバーズブログ
はじめに リクルートテクノロジーズに4月に新卒入社した 辻 健人です．GitHubではmaxmellonで活動しています． 7月より，やりとりも作成もラクになるシフト管理サービス「Airシフト」 のエンハンス開発を担当しています． 以前は，React製SPAのパフォーマンスチューニング実例という内容で記事を書きました． 今回は同じSPAにおいて，いかにwebpackが生成するJavaScriptのバンドルサイズを減らすかについて紹介していきます． webpackが，そもそも何のためのツールか，バンドルする理由などについては割愛させていただきます． そういった話は，こちらの記事 (Webpack の考え方について – mizchi’s blog) がわかりやすいと思います． Airシフトのアーキテクチャ Airシフトは，React-Reduxで開発されており，かつSSRを行っておりコードの大
Replacing Rails Asset Pipeline with Webpacker
Replacing Rails Asset Pipeline with WebpackerAugust 4, 2017 I'll admit that I'm still relatively new to Rails Webpacker, but on a new project I've decided to completely replace the Sprockets asset pipeline and instead handle all my assets through Webpacker. As a fellow convention over configuration fan I've tried my best to interpret what the convention for structuring a Webpacker app is - I think
Rails アプリのアセットを Webpacker で管理する
世間では GW ですが、皆さんいかがお過ごしでしょうか。こちらは仕事も落ち着いてきたため、直近のプロジェクトでそこそこ時間を使う羽目になった Webpacker についてのブログ記事を書くことにしました。 はじめに Ruby on Rails では Sprockets というモジュール（？）によって、JavaScript, CSS, 画像などのアセットを管理する事が出来ます。これは Rails 独自の仕組みであり、それによる問題点なども目立つようになったため、フロントエンド界隈で広く使われている Webpack を使いたいという要望は以前からあったようです。（その辺りの経緯などは、検索すれば色々出てくるので、ここでは記載しません。） そうした要望に応えるものが Webpacker で、簡単に言うと Webpack の機能を Rails に組み込んだもので、使う側からすると主に以下の2つの機
Webpacker 3ではじめるRailsエンジニアのためのモダンフロントエンド入門 〜Sprocketsを使わないRailsプロジェクト試案〜
はじめに Webpack、ES6風味のJavaScript、そして他すべてのモダンなクライアント側開発体験の進歩をまだ試していないなら、Webpacker 3.0は、はじめるのに絶好の機会だ。 —DHH Rails 5.1 で Webpacker が導入され、Railsでもモダンなフロントエンド開発が簡単にできるようになりました。 Webpackerはリリースからどんどん進化しており、 3.0でさらに使いやすくなりました。 本記事には2つの目的があります: RailsのAsset pipeline(Sprockets)をまったく使用しなくてもRails開発が可能であることを実証すること モダンフロントエンド未体験のRailsエンジニアに向けて、実際のコードをまじえつつ、モダンフロントエンド開発の雰囲気を伝えること また、Webpackerの概要を知りたいRailsエンジニアへの機能と使い方
Rails5.2+Webpacker3+React+TypeScript
centos7に ruby, node, yarnが入ってる環境に対して やったこと覚書 ①土台となるRails5.2をDB＝MySQL、Front=React、turbolinks、coffeescript、sprocketsは除外して作成 $ mkdir myapp $ cd myapp $ bundle init Gemfileを編集してrailsを入れるようにする $ vi Gemfile # frozen_string_literal: true source "https://rubygems.org" git_source(:github) {|repo_name| "https://github.com/#{repo_name}" } - # gem "rails" + gem "rails" $ bundle install --path=vendor/bundle $
WebPack-Dev-ServerからBrowsersyncに乗り換えた | // sakura note
前々回に モダンなフロントエンド開発環境をつくる という記事を書きましたが、その中で使った WebPack-Dev-Server を捨てたのでその背景と、Step-by-Stepの導入フローを書いてみます。 WebPack-Dev-Server を捨てた理由 大きく次の問題がありました。 Scssで@importされているファイルを変更しても、正しくビルドされない TypeScriptのimportは問題ない ビルド時にマップファイルが生成されず、バグが発生したときにそのまま調査に入れない ビルド結果がインメモリでサーブされるため、ビルドされたソースを確認するには別途 webpack コマンドを打たなくてはいけない 特に1番目のものがクリティカルで、CSSを適用する段階では毎回webpackコマンドを打って実際にビルドしなくてはならず、使い物にならなかったためです。 この3つの問題をすべて
【保存版】Rails 5 Webpacker公式ドキュメントの歩き方+追加情報｜TechRacho by BPS株式会社
こんにちは、hachi8833です。 Rails 5のWebpackerでつらみを踏まないために、公式のWebpackerドキュメントの要点をまとめてみました。追加情報がありましたら今後も更新したいと思います。 rails/webpackerより 公式のドキュメントが分散しているのと、mdファイル名から内容が推測しにくくて見通しがよくないので、ファイルの並びを再編成して概要を一覧できるようにしました（せめてファイル名の頭に番号でも振ってくれれば...）。具体的な設定方法についてはリンク先をご覧ください。 ⚓概要 ドキュメントリポジトリ: rails/webpacker/tree/master/docs -- mdが16ファイルあります。本記事ではこちらのみを扱います。 上のドキュメントリポジトリの最終更新日: 2018/04/23 更新や誤りにお気づきの方は@hachi8833までお知らせ
🍾🚀 webpack 3: Official Release!! 🚀🍾
After we released webpack v2, we made some promises to the community. We promised that we would deliver the features you voted for. Moreover, we promised to deliver them in a faster, more stable release cycle. No more year-long betas, no breaking changes between release candidates. We promised to do you right by you, the community that makes webpack thrive. The webpack team is proud to announce th
Introduction to webpack: Entry, Output, Loaders, and Plugins | CSS-Tricks
Introduction to webpack: Entry, Output, Loaders, and Plugins Front-end development has shifted to a modular approach, improving the encapsulation and structure of codebases. Tooling became a critical part of any project, and right now there are a lot of possible choices. Webpack has gained popularity in the last years because of its power and scalability, but some developers found its configuratio
browserify for webpack users
Clone via HTTPS Clone with Git or checkout with SVN using the repository’s web address. browserify for webpack users There's been a strange explosion in misinformation about browserify recently, particularly in comparisons to webpack. Generally speaking, most of this confusion stems from how webpack is more willing to pull features into its core to ease discoverability while browserify is more lik
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
createapp - webpack/Parcel/Snowpack boilerplate generator