Skip to content

[全体] app.jsバンドルを分割して閲覧ページのJSペイロードを約84%削減しました #2371

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
masaton0216 wants to merge 3 commits into
base: master
Choose a base branch
from
Open

[全体] app.jsバンドルを分割して閲覧ページのJSペイロードを約84%削減しました #2371

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
bb0ba1e
perf(js): app.jsからTinyMCE・CodeMirror・lodashを分離してバンドルを分割
Feb 20, 2026
a390fc2
fix: static行はワンライナー構文ではパース出来ない為、ブロック構文に変更
Feb 24, 2026
3f1a08c
chore: app.jsのコメントを実態に合わせて修正
Feb 24, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion public/js/app.js
View file
Open in desktop

Large diffs are not rendered by default.

39 changes: 0 additions & 39 deletions public/js/app.js.LICENSE.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,26 +10,6 @@
* Licensed under MIT (https://github.com/Eonasdan/tempus-dominus/blob/master/LICENSE)
*/

/*!
* @copyright Copyright (c) 2017 IcoMoon.io
* @license Licensed under MIT license
* See https://github.com/Keyamoon/svgxuse
* @version 1.2.6
*/

/*!
* TOAST UI Color Picker
* @version 2.2.8
* @author NHN Cloud FE Development Team <dl_javascript@nhn.com>
* @license MIT
*/

/*!
* TOAST UI ImageEditor
* @version 3.15.3
* @license MIT
*/

/*!
* The buffer module from node.js, for the browser.
*
Expand All @@ -50,27 +30,10 @@

/*! #__NO_SIDE_EFFECTS__ */

/*! @license DOMPurify 3.2.4 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/3.2.4/LICENSE */

/*! @source http://purl.eligrey.com/github/classList.js/blob/master/classList.js */

/*! Axios v1.9.0 Copyright (c) 2025 Matt Zabriskie and contributors */

/*! Fabric.js Copyright 2008-2015, Printio (Juriy Zaytsev, Maxim Chernyak) */

/*! ieee754. BSD-3-Clause License. Feross Aboukhadijeh <https://feross.org/opensource> */

/*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */

/**
* @license
* Lodash <https://lodash.com/>
* Copyright OpenJS Foundation and other contributors <https://openjsf.org/>
* Released under MIT license <https://lodash.com/license>
* Based on Underscore.js 1.8.3 <http://underscorejs.org/LICENSE>
* Copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
*/

/**
* @vue/runtime-core v3.5.13
* (c) 2018-present Yuxi (Evan) You and Vue contributors
Expand Down Expand Up @@ -120,5 +83,3 @@
* @author owenm <owen23355@gmail.com>
* @license MIT
*/

// @license RGB <-> HSV conversion utilities based off of http://www.cs.rit.edu/~ncs/color/t_convert.html
1 change: 1 addition & 0 deletions public/js/codemirror.js
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 2 additions & 0 deletions public/js/wysiwyg.js
View file
Open in desktop

Large diffs are not rendered by default.

38 changes: 38 additions & 0 deletions public/js/wysiwyg.js.LICENSE.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
/*!
* @copyright Copyright (c) 2017 IcoMoon.io
* @license Licensed under MIT license
* See https://github.com/Keyamoon/svgxuse
* @version 1.2.6
*/

/*!
* TOAST UI Color Picker
* @version 2.2.8
* @author NHN Cloud FE Development Team <dl_javascript@nhn.com>
* @license MIT
*/

/*!
* TOAST UI ImageEditor
* @version 3.15.3
* @license MIT
*/

/*!
* The buffer module from node.js, for the browser.
*
* @author Feross Aboukhadijeh <http://feross.org>
* @license MIT
*/

/*! @license DOMPurify 3.2.4 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/3.2.4/LICENSE */

/*! @source http://purl.eligrey.com/github/classList.js/blob/master/classList.js */

/*! Fabric.js Copyright 2008-2015, Printio (Juriy Zaytsev, Maxim Chernyak) */

/*! ieee754. BSD-3-Clause License. Feross Aboukhadijeh <https://feross.org/opensource> */

/*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */

// @license RGB <-> HSV conversion utilities based off of http://www.cs.rit.edu/~ncs/color/t_convert.html
4 changes: 3 additions & 1 deletion public/mix-manifest.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
{
"/js/app.js": "/js/app.js?id=335821b00d46bf40895a0cb9466626cd",
"/js/app.js": "/js/app.js?id=d82999a4d29b836b21765f3a25c269b8",
"/js/wysiwyg.js": "/js/wysiwyg.js?id=1743d7be1ce6fc6a601ea75e793bc675",
"/js/codemirror.js": "/js/codemirror.js?id=3f38993d16fe55488e1fedc75590e9ab",
"/css/app.css": "/css/app.css?id=9cbfd98c74ecf5345fdde288e3d85895"
}
17 changes: 1 addition & 16 deletions resources/js/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,23 +1,8 @@

/**
* First we will load all of this project's JavaScript dependencies which
* includes Vue and other libraries. It is a great starting point when
* building robust, powerful web applications using Vue and Laravel.
* includes jQuery, Bootstrap, Vue 3 and other libraries.
*/

require('./bootstrap');
require('./modules/tableScroll');

window.Vue = require('vue').default;

/**
* Next, we will create a fresh Vue application instance and attach it to
* the page. Then, you may begin adding components to this application
* or customize the JavaScript scaffolding to fit your unique needs.
*/

/*
const app = new Vue({
el: '#app'
});
*/
79 changes: 0 additions & 79 deletions resources/js/bootstrap.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,3 @@

window._ = require('lodash');

/**
* We'll load jQuery and the Bootstrap jQuery plugin which provides support
* for JavaScript based Bootstrap features such as modals and tabs. This
Expand Down Expand Up @@ -63,23 +60,6 @@ window.tempusDominus = require('@eonasdan/tempus-dominus');
// --- Default SortableJS
window.Sortable = require('sortablejs').default;

// --- codemirror 6
import { EditorView, placeholder } from "@codemirror/view";
window.EditorView = EditorView;
window.placeholder = placeholder; // プレースホルダー有効化
import { basicSetup } from "codemirror"
window.basicSetup = basicSetup;
// 言語モード
// ※ 対応言語はgithubのcodemirrorでlang-xxxを確認 https://github.com/codemirror?q=lang-&type=all&language=&sort=
import { javascript } from "@codemirror/lang-javascript"
window.javascript = javascript;
import { css } from "@codemirror/lang-css"
window.css = css;
import { java } from "@codemirror/lang-java"
window.java = java;
import { php } from "@codemirror/lang-php"
window.php = php;

// --- Vue.js 3
import { createApp } from 'vue';
window.createApp = createApp;
Expand All @@ -92,62 +72,3 @@ dayjs.extend(utc);
dayjs.extend(timezone);
window.dayjs = dayjs;

// --- TinyMCE
// 「Example src/editor.js」よりコピーして編集: https://www.tiny.cloud/docs/tinymce/latest/vite-es6-npm/#procedures
/* Import TinyMCE */
import tinymce from 'tinymce';
window.tinymce = tinymce;

/* Default icons are required. After that, import custom icons if applicable */
import 'tinymce/icons/default';

/* Required TinyMCE components */
import 'tinymce/themes/silver';
import 'tinymce/models/dom';

/* Import a skin (can be a custom skin instead of the default) */
import 'tinymce/skins/ui/oxide/skin.js';

/* Import plugins */
// delete: imagetools はTinyMCE 6.xのオープンソース版から削除されてPremium版に移りました
// delete: template はTinyMCE 7.xのオープンソース版から削除されてPremium版に移りました
import 'tinymce/plugins/advlist';
import 'tinymce/plugins/code';
import 'tinymce/plugins/link';
import 'tinymce/plugins/lists';
import 'tinymce/plugins/table';
import 'tinymce/plugins/media';
import 'tinymce/plugins/autolink';
import 'tinymce/plugins/preview';

/* Import plugins(Connect-CMS Custom)
コピー元Path： node_modules/tinymce/plugins/image/plugin.js */
// import 'tinymce/plugins/image';
import './tinymce/plugins/image/plugin.js';

/* Import plugins(Connect-CMS Only)
Path: resources/js/tinymce/plugins/... */
import './tinymce/plugins/file/plugin.js';
import './tinymce/plugins/translate/plugin.js';
import './tinymce/plugins/pdf/plugin.js';
import './tinymce/plugins/face/plugin.js';
import './tinymce/plugins/cc_template/plugin.js';
import './tinymce/plugins/cc_image_editor/plugin.js';

/* content UI CSS is required */
import 'tinymce/skins/ui/oxide/content.js';

/* The default content CSS can be changed or replaced with appropriate CSS for the editor content. */
// delete: contentCssは使用しない
// 参考Path: node_modules/tinymce/skins/content/default/content.js
// import 'tinymce/skins/content/default/content.js';

/* ダウンロードした日本語 https://www.tiny.cloud/get-tiny/language-packages/
Path: resources/js/tinymce/langs/ja.js */
import './tinymce/langs/ja.js';

// tui-image-editor本体とCSS
import ImageEditor from 'tui-image-editor';
window.ImageEditor = ImageEditor;
import 'tui-image-editor/dist/tui-image-editor.css';
import 'tui-color-picker/dist/tui-color-picker.css';
16 changes: 16 additions & 0 deletions resources/js/codemirror.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
// --- codemirror 6
import { EditorView, placeholder } from "@codemirror/view";
window.EditorView = EditorView;
window.placeholder = placeholder; // プレースホルダー有効化
import { basicSetup } from "codemirror"
window.basicSetup = basicSetup;
// 言語モード
// ※ 対応言語はgithubのcodemirrorでlang-xxxを確認 https://github.com/codemirror?q=lang-&type=all&language=&sort=
import { javascript } from "@codemirror/lang-javascript"
window.javascript = javascript;
import { css } from "@codemirror/lang-css"
window.css = css;
import { java } from "@codemirror/lang-java"
window.java = java;
import { php } from "@codemirror/lang-php"
window.php = php;
59 changes: 59 additions & 0 deletions resources/js/wysiwyg.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
// --- TinyMCE
// 「Example src/editor.js」よりコピーして編集: https://www.tiny.cloud/docs/tinymce/latest/vite-es6-npm/#procedures
/* Import TinyMCE */
import tinymce from 'tinymce';
window.tinymce = tinymce;

/* Default icons are required. After that, import custom icons if applicable */
import 'tinymce/icons/default';

/* Required TinyMCE components */
import 'tinymce/themes/silver';
import 'tinymce/models/dom';

/* Import a skin (can be a custom skin instead of the default) */
import 'tinymce/skins/ui/oxide/skin.js';

/* Import plugins */
// delete: imagetools はTinyMCE 6.xのオープンソース版から削除されてPremium版に移りました
// delete: template はTinyMCE 7.xのオープンソース版から削除されてPremium版に移りました
import 'tinymce/plugins/advlist';
import 'tinymce/plugins/code';
import 'tinymce/plugins/link';
import 'tinymce/plugins/lists';
import 'tinymce/plugins/table';
import 'tinymce/plugins/media';
import 'tinymce/plugins/autolink';
import 'tinymce/plugins/preview';

/* Import plugins(Connect-CMS Custom)
コピー元Path： node_modules/tinymce/plugins/image/plugin.js */
// import 'tinymce/plugins/image';
import './tinymce/plugins/image/plugin.js';

/* Import plugins(Connect-CMS Only)
Path: resources/js/tinymce/plugins/... */
import './tinymce/plugins/file/plugin.js';
import './tinymce/plugins/translate/plugin.js';
import './tinymce/plugins/pdf/plugin.js';
import './tinymce/plugins/face/plugin.js';
import './tinymce/plugins/cc_template/plugin.js';
import './tinymce/plugins/cc_image_editor/plugin.js';

/* content UI CSS is required */
import 'tinymce/skins/ui/oxide/content.js';

/* The default content CSS can be changed or replaced with appropriate CSS for the editor content. */
// delete: contentCssは使用しない
// 参考Path: node_modules/tinymce/skins/content/default/content.js
// import 'tinymce/skins/content/default/content.js';

/* ダウンロードした日本語 https://www.tiny.cloud/get-tiny/language-packages/
Path: resources/js/tinymce/langs/ja.js */
import './tinymce/langs/ja.js';

// tui-image-editor本体とCSS
import ImageEditor from 'tui-image-editor';
window.ImageEditor = ImageEditor;
import 'tui-image-editor/dist/tui-image-editor.css';
import 'tui-color-picker/dist/tui-color-picker.css';
10 changes: 10 additions & 0 deletions resources/views/plugins/common/codemirror.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,16 @@
height: {{$height}};
}
</style>
{{-- codemirror.js の条件付き読み込み。CodeMirror は app.js から分離されており、コード編集ページでのみ読み込む。
同一ページ内で複数回 include された場合に備え、予防的プログラミングとして static 変数で重複読み込みを防止する。 --}}
@php
static $codemirror_js_loaded = false;
@endphp
@if (!$codemirror_js_loaded)
@php($codemirror_js_loaded = true)
<script src="{{ url('/') }}{{ mix('/js/codemirror.js') }}"></script>
@endif

<script type="text/javascript">
let view_{{$element_id}} = editorFromTextArea(document.getElementById("{{$element_id}}"))

Expand Down
10 changes: 10 additions & 0 deletions resources/views/plugins/common/wysiwyg.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -244,6 +244,16 @@
}
@endphp

{{-- wysiwyg.js の条件付き読み込み。TinyMCE・tui-image-editor は app.js から分離されており、編集ページでのみ読み込む。
同一ページ内で複数回 include された場合に備え、予防的プログラミングとして static 変数で重複読み込みを防止する。 --}}
@php
static $wysiwyg_js_loaded = false;
@endphp
@if (!$wysiwyg_js_loaded)
@php($wysiwyg_js_loaded = true)
<script src="{{ url('/') }}{{ mix('/js/wysiwyg.js') }}"></script>
@endif

{{-- 非表示のinput type file. file plugin用. see) resources\js\tinymce\plugins\file\plugin.js --}}
<input type="file" class="d-none" id="cc-file-upload-file1-{{$frame_id}}">
<input type="file" class="d-none" id="cc-file-upload-file2-{{$frame_id}}">
Expand Down
2 changes: 2 additions & 0 deletions webpack.mix.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,8 @@ const mix = require('laravel-mix');
*/

mix.js('resources/js/app.js', 'public/js').vue()
.js('resources/js/wysiwyg.js', 'public/js')
.js('resources/js/codemirror.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');

// fortawesomeのディレクトリインストール対応で、相対パスを指定
Expand Down