Laravel Mix에서 출력되는 JavaScript 파일의 파일 크기가 커서 문제가 발생하면,
우선은 어느 패키지가 어느 정도의 사이즈를 차지하고 있는지 조사한다고 생각합니다.
그래서 어떻게 구성비를 조사하는지를 「webpack 번들 사이즈」등으로 검색한 결과, source-map-explorer라는 패키지를 발견했습니다.

Getting started

바삭 바삭하게 사용합시다.
우선 준비하는 것은 Laravel 앱으로, 최신의 6을 떨어뜨려 와 npm install 까지 끝난 곳으로부터 시작합니다.
다음으로 이번 간인 source-map-explorer를 설치합니다.

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

package.json 에 analyze 명령을 추가합시다.

{
    ...
    "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

소스 맵이 없으면 화가났습니다
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

실행하면 브라우저에서 위와 같은 화면이 표시됩니다.
요소를 클릭하면 더 자세히 살펴볼 수 있습니다.
간단하고 이해하기 쉽습니다

참고 URL

htps : // 코 m / q 루사도 r · ms / cd05 3
h tps : // c 어서 - 라 ct - 아 p. v / do cs / ana ly gin g-e-bun dぇ-
htps : // 기주 b. 코 m / 단 vk / 그래 r 세마 p-에 xp ㄉ r