LoginSignup
1
1

More than 3 years have passed since last update.

Laravel Mixで出力されたJavaScriptファイルのパッケージ構成比をsource-map-explorerで調べる

Posted at

Laravel Mixで出力されたJavaScriptファイルのファイルサイズが大きくて困っているとき、
まずはどのパッケージがどれぐらいのサイズを占めているか調べると思います。
そこでどうやって構成比を調べるかを「webpack バンドル サイズ」などで検索したところ、source-map-explorerというパッケージを見つけました。

Getting started

サクッと使ってみましょう。
まず用意するのはLaravelアプリで、最新の6を落としてきてnpm installまで済ませたところから始めます。
次に今回の肝であるsource-map-explorerをインストールします。

$ npm install --save-dev source-map-explorer

package.jsonanalyzeコマンドを追加しましょう。

{
    ...
    "scripts": {
        ...

        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "analyze": "source-map-explorer 'public/js/*.js'"
    },
    ...
}

そしてJavaScriptファイルを出力した後にanalyzeを実行します。

$ npm run dev
$ npm run analyze

> @ analyze
> source-map-explorer 'public/js/*.js'

public/js/app.js
  Unable to find a source map.
  See https://github.com/danvk/source-map-explorer/blob/master/README.md#generating-source-maps

ソースマップがないと怒られました:cry:

webpack.mix.jsを修正します。

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .sourceMaps();

npm run productionでないとソースマップが出力されません。

$ npm run production
$ npm run analyze

スクリーンショット 2019-12-23 18.21.11.png

実行するとブラウザで上記のような画面が表示されます。
要素をクリックするとさらに詳しく調べられたりします。
シンプルでわかりやすいですね:beer:

参考URL

https://qiita.com/qrusadorz/items/cd05ffe3ad08754b9e65
https://create-react-app.dev/docs/analyzing-the-bundle-size
https://github.com/danvk/source-map-explorer

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1