常連

Reactで開発しているプロジェクトのバンドルサイズについて質問です。
パフォーマンス改善を考える中で「バンドルサイズが大きいと良くない」とよく聞くのですが、
そもそも 「どのくらいのサイズから大きいと判断されるのか」 がよくわかっていません。

調べてみたところ、100KB以内が良いとか、初回ロードが500KB以内に収まるのが理想という情報も見かけましたが、
ソースによって言っていることがバラバラで、どれを参考にすればよいのか迷っています。

質問したいこと
Reactのバンドルサイズは何KB以上から「大きい」とされるのでしょうか？

一般的なWebアプリやSPA（シングルページアプリケーション）では、どのくらいのサイズが目安になりますか？

バンドルサイズがパフォーマンスに与える具体的な影響と、ユーザー体験への影響はどの程度でしょうか？

実際にプロの方は、どれくらいのサイズを目標に最適化しているかも知りたいです


もし参考になる基準や経験などあれば、教えていただけると嬉しいです！
よろしくお願いいたします。

バンドルサイズが大きいと言える基準について知りたいです

# 概要
コードを実行前に下記のようなエラーが発生し、コードを実行出来ません。
```JSON
{ 
  "errorType":"Error",
  "errorMessage":"Module build failed: Error: ENOENT: no such file or directory,
   open '/sample/node_modules/axios/node_modules/form-data/lib/form_data.js'",
  "stack":["Error: Module build failed: Error: ENOENT: no such file or directory,
   open '/sample/node_modules/axios/node_modules/form-data/lib/form_data.js'",
  "    at Object../node_modules/axios/node_modules/form-data/lib/form_data.js (/var/task/app.js:41266:7)",
  "    at __webpack_require__ (/var/task/webpack:/Sample/webpack/bootstrap:19:1)",
  "    at Object../node_modules/axios/lib/defaults/env/FormData.js (/var/task/webpack:/Sample/node_modules/axios/lib/defaults/env/FormData.js:2:1)",
  "    at __webpack_require__ (/var/task/webpack:/Sample/webpack/bootstrap:19:1)",
  "    at Object../node_modules/axios/lib/defaults/index.js (/var/task/webpack:/Sample/node_modules/axios/lib/defaults/index.js:124:15)",
  "    at __webpack_require__ (/var/task/webpack:/Sample/webpack/bootstrap:19:1)",
  "    at Object../node_modules/axios/lib/core/transformData.js (/var/task/webpack:/Sample/node_modules/axios/lib/core/transformData.js:4:16)",
  "    at __webpack_require__ (/var/task/webpack:/Sample/webpack/bootstrap:19:1)",
  "    at Object../node_modules/axios/lib/core/dispatchRequest.js (/var/task/webpack:/Sample/node_modules/axios/lib/core/dispatchRequest.js:4:21)",
  "    at __webpack_require__ (/var/task/webpack:/Sample/webpack/bootstrap:19:1)"]
  }
```
エラーの内容はaxiosモジュールのform-dataが見つからないという内容になります。

# 直前に行った事
Webpackやaxiosのモジュールを最新バージョンにアップデートしました。

# 現状の解決方法
1. エラーが発生した後、webpack watchを解いて再度webpack watchを行う
2. `npm cache verify`でキャッシュを削除
こうすると、エラーが消えますが、何度かコードを実行したり、時間が経過するとまた同じエラーが発生します。

# 質問
エラーの発生するようになった原因は、モジュールのアップデートにあるように思えます。
検索していますが、axiosでform-data.jsが見つからないというケースは見当たらず困っております。

怪しい部分などご指摘お願い致します。

## 追記
下記を試しましたが、エラーは解消されませんでした。
`rm -rf package-lock.json node_modules/`を行い、`npm install`

webpack
```Javascript
import { Configuration } from 'webpack';
const AwsSamPlugin = require("aws-sam-webpack-plugin");
const awsSamPlugin = new AwsSamPlugin();

const config: Configuration = {
  entry: awsSamPlugin.entry(),
  output: {
    filename: "[name]/app.js",
    libraryTarget: "commonjs2",
    path: __dirname + "/.aws-sam/build/"
  },
  devtool: "source-map",
  resolve: {
    extensions: [".ts", ".js", ".json"]
  },
  target: "node",
  externals: process.env.NODE_ENV === "development"
    ? ["chrome-aws-lambda","@google-cloud/bigquery", "sharp"]
    : ["aws-sdk","chrome-aws-lambda","@google-cloud/bigquery","sharp"],
  mode: process.env.NODE_ENV || "production",
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        loader: "ts-loader",
      }
    ]
  },
  plugins: [
    awsSamPlugin
  ],
}

export default config
```

tsconfig
```JSON
{
  "compilerOptions": {
    "target": "es2019",
    "module": "commonjs",
    "allowJs": true,
    "strict": true,  
    "esModuleInterop": true,
    "rootDir": ".",
    "outDir": "./built",
    "sourceMap": true
  },
  "include": [
    "./src/**/*"
  ],
}
```

モジュールのビルドが失敗する。

### 実現したいこと
Chromeではデバッグできるので、VSCode上でもブレークポイントを使ってデバッグできるようにしたい。

### 発生している問題・分からないこと
VSCodeではsouceMapが読み込めずVSCodeでデバッグができない。どうやらsouceMapとトランスパイルされたjsが別のコンテンツと判定されている…？

### エラーメッセージ
```error
[Debug Diagnostics:]


✅ This breakpoint was initially set in:

D:\Dropbox\Job\Engineering\uetax\src\scripts\module\CsvFileReader.ts line 37 column 1
❓ We couldn't find a corresponding source location, and didn't find any source with the name CsvFileReader.ts.
How did you expect this file to be loaded? (If you have a compilation step, you should pick 'sourcemap')

---

http://localhost:9223/weekReport.bundle.js
sourceReference: 1966746525
absolutePath:
absolutePath verified? ❌ Disk verification failed (does not exist or different content)
sourcemap children: None (does not have a sourcemap)
referenced from sourcemap: None (not from a sourcemap)
```

### 該当のソースコード

```webpack.config.ts

const config: Configuration = {
    devtool: "source-map",
    entry: {
        weekReport: "./src/index.ts",
    },

    output: {
        path: path.join(__dirname, "dist"),
    },

    module: {
        rules: [
            {
                // 拡張子 .ts の場合
                test: /\.tsx?$/,
                // TypeScript をコンパイルする
                use: {
                    loader: "ts-loader",
                    options: {
                        transpileOnly: true,
                        configFile: "tsconfig.json",
                    },
                },
            },
    ],
};
// 設定をデフォルトエクスポート
export default config;

```

```launch.json
{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch development server",
            "url": "http://localhost:9223",
            "webRoot": "${workspaceFolder}",
            "preLaunchTask": "dev",
            "skipFiles": ["<node_internals>/**"],
            "trace": true,
            "sourceMaps": true,
            "resolveSourceMapLocations": ["${workspaceFolder}/**", "!**/node_modules/**"],
            "sourceMapPathOverrides": {
                "webpack:///./*": "${webRoot}/*",
                "webpack://./src/*": "${webRoot}/src/*"
            }
        }
    ]
}

```

### 試したこと・調べたこと
- [x] teratailやGoogle等で検索した
- [x] ソースコードを自分なりに変更した
- [ ] 知人に聞いた
- [ ] その他

##### 上記の詳細・結果
- launch.jsonに "resolveSourceMapLocations": ["${workspaceFolder}/**", "!**/node_modules/**"],を追加してみる
- sourceMapPathOverridesを変えてみる等

### 補足
フォルダー階層：
/proj
   ├─ .vscode
   │  ├─ lanch.json
   │  ├─ task.json
   │  └─ www.code-wokspace
   ├─ dist
   │  ├─ proj.bundle.js
   │  ├─ proj.bundle.js.map
   │  └─ index.html
   ├─ src
   │  └─ ...
   ├─ package.json
   ├─ tsconfig.json
   └─ webpack.config.ts

Typescript + Webpack + VSCodeな環境でChromeではsouceMapが読み込まれているのに、VSCodeでは読み込めずVSCodeでブレークポイントが使えない

動画教材を見ながら、サンプルアプリを開発しています。

教材に則って、webpack-dev-server でローカルにサーバーを立ち上げて確認をしています。
コマンドをうちこみ、サーバーを立ち上げたときに、
```
Project is running at http://localhost:8080/
```
と出てくるので、chromeからアクセスしようとするのですが、
> このページは動作していません
localhost からデータが送信されませんでした。
ERR_EMPTY_RESPONSE

との結果が表示されてしまいます。
こちらはSafariでも同様の結果が返ってきていることを確認しました。

ですが、`127.0.0.1:8080`であればアクセスできていることを確認できました。

これを`localhost`でもアクセスできるようにしたいです。
恐らく、過去の自分がローカル環境を変更したのかと思っているのですが、どこをいじったかは分かっておりません。
また、こういったトラブルが起こった際の、適切な問題の切り分け手順が分かっていないです。

是非ご教示頂けますと幸いです。

宜しくお願いいたします。

localhost:8080 に接続ができない。

node_modulesについて詳しく知りたいです。

私の現状の理解だと、npmなどでインストールした開発に必要なライブラリなどのバージョンの依存関係を管理しているフォルダ群という感じです。

今回質問した経緯としては、https://github.com/liady/webpack-node-externals こちらのリポジトリを見ていて、気になる文面があったからです。

```
Webpack allows you to define externals - modules that should not be bundled.

When bundling with Webpack for the backend - you usually don't want to bundle its node_modules dependencies. This library creates an externals function that ignores node_modules when bundling in Webpack.
(Inspired by the great Backend apps with Webpack series)
--- 

バックエンドをWebpackでバンドルする場合、通常はnode_modulesの依存関係をバンドルしたくありません。このライブラリは、Webpackでバンドルする際にnode_modulesを無視するexternals関数を作成します。
このライブラリは、Webpack でバンドルする際に node_modules を無視する externals 関数を作成します。
```

backendでは依存関係をバンドルしたくないというのはどういうことでしょうか？
フロントエンドでもバンドルしたくないのでは？

稚拙な質問で恐縮ですがお答えいただけると幸いです????‍♂️

node_modulesとは何なのでしょうか？

### 前提・実現したいこと

vue.jsでwebシステムの開発を行っています。
昨日からnpm run serveを実行すると下記のエラーが表示されます。
何かわかることがあればご指摘お願い致します。

### 発生している問題・エラーメッセージ

```
'vue-cli-service' は、内部コマンドまたは外部コマンド、
操作可能なプログラムまたはバッチ ファイルとして認識されていません。
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! reportsystem@0.1.0 serve: `vue-cli-service serve`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the reportsystem@0.1.0 serve script.
npm ERR! This is probably not a problem with npm. There is likely additional log
ging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Demo\AppData\Roaming\npm-cache\_logs\2019-10-25T08_39_37_0
12Z-debug.log
```

### 該当のソースコード

```
ソースコード
```

### 試したこと

思い当たることとして直前に copy-webpack-plugin のインストールを行っていたため当該プラグインの削除を行いました。
またnode.jsとnpmのバージョンアップを行ってみました。
node.js : 10.16.0 → 12.13.0
npm : 4.0.5 → 6.12.0

### 補足情報（FW/ツールのバージョンなど）
package.jsonは以下の通りです。

{
  "name": "reportsystem",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^2.6.5",
    "element-ui": "^2.4.5",
    "firebase": "^6.2.0",
    "firebase-admin": "^8.3.0",
    "moment": "^2.24.0",
    "vue": "^2.6.10"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.8.0",
    "@vue/cli-plugin-eslint": "^3.8.0",
    "@vue/cli-service": "^3.8.0",
    "babel-eslint": "^10.0.1",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.0.0",
    "vue-cli-plugin-element": "^1.0.1",
    "vue-template-compiler": "^2.6.10",
    "webpack": "^4.41.2",
    "webpack-cli": "^3.3.9"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "rules": {},
    "parserOptions": {
      "parser": "babel-eslint"
    }
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ]
}

npm run serveでエラーになる

###質問概要
jsxのimgタグのsrc属性に関する質問です。
今、ディレクトリの構造が下記のようになっているとします。

root/
├ images/
│ └ sample.png 
├ public/
│ ├ bundle.js 
│ └ index.html
├ src/ 
│ ├ components/ 
│ │ └ Header.jsx
│ └ index.jsx 
├ package.json
└ webpack.config.js

`Header.jsx`の`<img>`のsrc属性値として`images/sample.png`を読み込ませようと思い、方法①と方法②を試しました。


###方法①
方法①では`Header.jsx`を下記のようにしました。

```jsx
import React from 'react';

const Header = () => (
  <div className="header">
    <div className="header-left">
      <div>
        <img
          src="../images/sample.png"
          alt=""
        />
      </div>
    </div>
  </div>
);

export default Header;

```

しかし、画像は表示されず、コンソールには`not found`と表示されてしまいます。
（ちなみに、webpackによってトランスパイルされ`public/bundle.js`として出力されます。）


###方法②
そこで、方法②では`url-loader`をインストールし、`webpack.config.js`に下記を追加し、`Header.jsx`も以下のように書き換えました。

```js
{
   test: /.png$/,
   loader: 'url-loader?mimetype=image/png',
}
```

```jsx
import React from 'react';

import imgUrl from '../../images/sample.png';

const Header = () => (
  <div className="header">
    <div className="header-left">
      <div>
        <img
          src={imgUrl}
          alt=""
        />
      </div>
    </div>
  </div>
);

export default Header;

```

上記のようにすると、うまく画像が表示されます。

###質問まとめ
方法①で画像が表示されない原因は何なのでしょうか？
（できるだけ方法①を採用したいと考えています。）
何かご回答をいただけると非常に助かります。

React.jsにおけるimgタグのsrc属性の記述方法について

### 前提

Laravelで自作WEBアプリ開発をしています。
下記記事によると、JavaScript、jQueryを使用する際
**webpack.mix.js**を使用するのがベストだそうですね。

ということで、**webpack.mix.js**を編集しようとしてみました。
しかし、**webpack.mix.js**はどこにも存在しませんでした。

### 参考記事
[Laravelでjavascript、jQueryを使う方法](https://dkssksk.com/laravel-javascript-jquery/)
[Laravel Mixとは？webpackをより便利に、簡単に。Laravel以外でも使えるよ。](https://qiita.com/minato-naka/items/bfc3bbd9a388084e6f17)

### 実現したいこと

- Laravelでwebpack.mix.jsを利用する
- LaravelでJavaScriptを使用する
- （LaravelでjQueryを使用する）



### 該当のソースコード

```package.json
{
    "private": true,
    "scripts": {
        "dev": "vite",
        "build": "vite build"
    },
    "devDependencies": {
        "@popperjs/core": "^2.10.2",
        "@vitejs/plugin-vue": "^3.0.1",
        "axios": "^1.1.2",
        "bootstrap": "^5.2.1",
        "laravel-vite-plugin": "^0.6.0",
        "lodash": "^4.17.19",
        "postcss": "^8.1.14",
        "sass": "^1.32.11",
        "vite": "^3.2.2",
        "vue": "^3.2.37"
    },
    "dependencies": {
        "jquery": "^3.6.1"
    }
}

```