{"id":250,"date":"2020-05-26T13:55:28","date_gmt":"2020-05-26T04:55:28","guid":{"rendered":"http:\/\/localhost:8000\/?p=250"},"modified":"2021-01-16T18:48:31","modified_gmt":"2021-01-16T09:48:31","slug":"vue-firebase-reduce-bundle-size","status":"publish","type":"post","link":"http:\/\/localhost:8000\/2020\/05\/vue-firebase-reduce-bundle-size.html","title":{"rendered":"Vue+Firebase\u3067\u4f5c\u3063\u305f\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u30a2\u30d7\u30ea\u306e\u30d0\u30f3\u30c9\u30eb\u30b5\u30a4\u30ba\u3092\u524a\u6e1b\u3059\u308b"},"content":{"rendered":"<p>Vue+Typescript+Firebase\u3067Chrome\u62e1\u5f35\u3092\u4f5c\u3063\u3066\u3044\u308b\u306e\u3067\u3059\u304c\u3001\u30d0\u30f3\u30c9\u30eb\u30b5\u30a4\u30ba\u304c\u5927\u304d\u3044\u3088\u3068\u8b66\u544a\u304c\u51fa\u305f\u306e\u3067\u5bfe\u5fdc\u3057\u3088\u3046\u3068\u601d\u3044\u307e\u3059\u3002<\/p>\n<h2>\u4f7f\u3063\u3066\u3044\u308b\u6280\u8853<\/h2>\n<ul>\n<li>Chrome Extension<\/li>\n<li>Vue+Vuetify<\/li>\n<li>TypeScript<\/li>\n<li>Firebase\n<ul>\n<li>Authentication<\/li>\n<li>Cloud Firestore<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h2>\u30ef\u30fc\u30cb\u30f3\u30b0\u306e\u5185\u5bb9<\/h2>\n<p><code>npm run build<\/code>\uff08<code>cross-env NODE_ENV=production webpack --hide-modules<\/code>\uff09\u3067\u672c\u756a\u7528\u306e\u30b3\u30fc\u30c9\u3092\u51fa\u529b\u3057\u3066\u307f\u305f\u3068\u3053\u308d\u3001\u30d0\u30f3\u30c9\u30eb\u30b5\u30a4\u30ba\u304c\u63a8\u5968\u30b5\u30a4\u30ba\uff08244 KB\uff09\u3092\u8d85\u3048\u3066\u3044\u308b\u3068\u3044\u3046\u30ef\u30fc\u30cb\u30f3\u30b0\u304c\u51fa\u307e\u3057\u305f\u3002<\/p>\n<pre><code>WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).\nThis can impact web performance.\nAssets: \n  \/fonts\/_\/node_modules\/@mdi\/font\/fonts\/materialdesignicons-webfont.eot (842 KiB)\n  \/fonts\/_\/node_modules\/@mdi\/font\/fonts\/materialdesignicons-webfont.woff2 (276 KiB)\n  \/fonts\/_\/node_modules\/@mdi\/font\/fonts\/materialdesignicons-webfont.woff (390 KiB)\n  \/fonts\/_\/node_modules\/@mdi\/font\/fonts\/materialdesignicons-webfont.ttf (842 KiB)\n  options\/options.js (578 KiB)\n  popup\/popup.js (1.17 MiB)\n\nWARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.\nEntrypoints:\n  popup\/popup (1.17 MiB)\n      popup\/popup.js\n  options\/options (578 KiB)\n      options\/options.js<\/code><\/pre>\n<h2>\u30d0\u30f3\u30c9\u30eb\u69cb\u6210\u3092\u53ef\u8996\u5316<\/h2>\n<p><code>webpack-bundle-analyzer<\/code>\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3057\u3066\u3001<\/p>\n<pre><code class=\"language-sh\">npm install --save-dev webpack-bundle-analyzer<\/code><\/pre>\n<p><code>webpack.config.js<\/code>\u306bplugin\u3092\u8ffd\u52a0\u3057\u307e\u3059\u3002<\/p>\n<pre><code class=\"language-javascript\">const BundleAnalyzerPlugin = require(&#039;webpack-bundle-analyzer&#039;).BundleAnalyzerPlugin;\n\nconst config = {\n  plugins: [\n    new BundleAnalyzerPlugin(),\n  ]\n}<\/code><\/pre>\n<p>\u3042\u3068\u306f\u3001<code>npm run build<\/code>\u3092\u5b9f\u884c\u3059\u308b\u3060\u3051\u3067\u3001\u81ea\u52d5\u7684\u306b\u30d6\u30e9\u30a6\u30b6\u304c\u7acb\u3061\u4e0a\u304c\u308a\u3001\u30d0\u30f3\u30c9\u30eb\u306e\u69cb\u6210\u8981\u7d20\u3092\u78ba\u8a8d\u3067\u304d\u307e\u3059\u3002<br \/>\n<img src=\"http:\/\/localhost:8000\/wp-content\/uploads\/2021\/01\/20200524182043-400x207.png\" alt=\"\" \/><\/p>\n<p>\u3069\u3046\u3084\u3089\u3001<code>firebase<\/code> <code>vuetify<\/code> <code>@mdi\/font<\/code> <code>vue<\/code> \u3092\u6e1b\u3089\u305b\u3070\u826f\u3055\u305d\u3046\u3067\u3059\u3002<\/p>\n<h2>\u305d\u3082\u305d\u3082\u3001\u30d0\u30f3\u30c9\u30eb\u306b\u30e2\u30b8\u30e5\u30fc\u30eb\u304c\u542b\u3081\u3089\u308c\u308b\u30e1\u30ab\u30cb\u30ba\u30e0\u306f\uff1f<\/h2>\n<p>\u30d0\u30f3\u30c9\u30eb\u304b\u3089\u30e2\u30b8\u30e5\u30fc\u30eb\u3092\u524a\u9664\u3059\u308b\u305f\u3081\u306b\u306f\u3001\u3069\u3046\u3084\u3063\u305f\u3089\u30d0\u30f3\u30c9\u30eb\u306b\u30e2\u30b8\u30e5\u30fc\u30eb\u304c\u542b\u3081\u3089\u308c\u308b\u304b\u3092\u77e5\u3063\u3066\u304a\u304d\u305f\u3044\u3067\u3059\u304c\u3001 \u81ea\u5206\u304c\u77e5\u308b\u7bc4\u56f2\u3067\u3001\u4ee5\u4e0b\u306e\u4e8c\u3064\u306e\u30e1\u30ab\u30cb\u30ba\u30e0\u304c\u3042\u308b\u3088\u3046\u3067\u3059\u3002<\/p>\n<h3>\u30a8\u30f3\u30c8\u30ea\u30fc\u30dd\u30a4\u30f3\u30c8\u304b\u3089\u4f9d\u5b58\u95a2\u4fc2<\/h3>\n<p>webpack\u306f<code>webpack.config.js<\/code>\u306e<code>entry<\/code>\u3067\u6307\u5b9a\u3057\u305f\u30a8\u30f3\u30c8\u30ea\u30fc\u30dd\u30a4\u30f3\u30c8\u304b\u3089\u4f9d\u5b58\u95a2\u4fc2\u3092\u89e3\u6790\u3057\u3066\u3001\u4f9d\u5b58\u95a2\u4fc2\u306b\u3042\u308b\u30e2\u30b8\u30e5\u30fc\u30eb\u3092\u30d0\u30f3\u30c9\u30eb\u306b\u542b\u3081\u308b\u3088\u3046\u3067\u3059\u3002<br \/>\n\u3053\u308c\u3092\u30d0\u30f3\u30c9\u30eb\u304b\u3089\u9664\u5916\u3057\u305f\u3044\u5834\u5408\u3001\u4ee5\u4e0b\u306e\u3088\u3046\u306a\u5bfe\u5fdc\u3092\u53d6\u308b\u3053\u3068\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n<ul>\n<li>\u5b9f\u969b\u306b\u306f\u4f7f\u3063\u3066\u306a\u3044\u30b1\u30fc\u30b9\n<ul>\n<li>\u5358\u7d14\u306b<code>import<\/code>\u6587\u3084<code>require()<\/code>\u6587\u3092\u524a\u9664\u3059\u308b<\/li>\n<li>\u3053\u3093\u306a\u306e\u306a\u3044\u3088\u3068\u601d\u3046\u304b\u3082\u3057\u308c\u307e\u305b\u3093\u304c\u3001\u524a\u9664\u3057\u5fd8\u308c\u305fimport\u6587\u3084\u3001\u30d0\u30f3\u30c9\u30eb\u306b\u542b\u3081\u308b\u305f\u3081\u3060\u3051\u306eimport\u6587\u306a\u3069\u3001\u7d50\u69cb\u3042\u308a\u307e\u3059w<\/li>\n<\/ul>\n<\/li>\n<li>\u5b9f\u969b\u306b\u4f7f\u3063\u3066\u3044\u308b\u30b1\u30fc\u30b9\n<ul>\n<li><code>webpack.config.js<\/code>\u306e<code>externals<\/code>\u3067\u542b\u3081\u306a\u3044\u30e2\u30b8\u30e5\u30fc\u30eb\u3092\u660e\u793a\u7684\u306b\u9664\u5916\u8a2d\u5b9a\u3059\u308b<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h3>\u30d0\u30f3\u30c9\u30eb\u6642\u306b\u5b9f\u884c\u3055\u308c\u308bPlugin<\/h3>\n<p>Plugin\u306e\u4e2d\u3067\u3001\u30d0\u30f3\u30c9\u30eb\u306b\u30e2\u30b8\u30e5\u30fc\u30eb\u3092\u542b\u3081\u308b\u3088\u3046\u306a\u3053\u3068\u3092\u3059\u308b\u3082\u306e\u3082\u3042\u308a\u307e\u3059\u3002<br \/>\n\u305d\u306e\u5834\u5408\u3001Plugin\u81ea\u4f53\u3092\u524a\u9664\u3057\u305f\u308a\u3001\u52d5\u4f5c\u3092\u5909\u3048\u305f\u308a\u3059\u308b\u3053\u3068\u306b\u306a\u308a\u307e\u3059\u3002 <\/p>\n<h2>\u30d0\u30f3\u30c9\u30eb\u304b\u3089\u9664\u5916<\/h2>\n<h3>\u30a8\u30f3\u30c8\u30ea\u30fc\u30dd\u30a4\u30f3\u30c8\u304b\u3089\u4f9d\u5b58\u95a2\u4fc2<\/h3>\n<h4>vue\u30fbvuetify\u30fb@mdi\/font<\/h4>\n<p>vue\u95a2\u4fc2\u306e3\u3064\u306e\u30e9\u30a4\u30d6\u30e9\u30ea\u3092CDN\u304b\u3089\u8aad\u307f\u8fbc\u307f\u3001\u30d0\u30f3\u30c9\u30eb\u304b\u3089\u9664\u5916\u3059\u308b\u3088\u3046\u306b\u3057\u307e\u3059\u3002<\/p>\n<h5>CDN\u304b\u3089\u306e\u8aad\u307f\u8fbc\u307f<\/h5>\n<p>Chrome Extension\u306a\u306e\u3067\u3001\u30a2\u30a4\u30b3\u30f3\u3092\u30af\u30ea\u30c3\u30af\u3057\u305f\u6642\u306b\u547c\u3073\u51fa\u3055\u308c\u308b<code>popup.html<\/code>\u304c\u30a8\u30f3\u30c8\u30ea\u30fc\u30dd\u30a4\u30f3\u30c8\u306b\u306a\u308b\u306e\u3067\u3059\u304c\u3001\u305d\u3053\u3067CDN\u304b\u3089 <a href=\"https:\/\/jp.vuejs.org\/v2\/guide\/installation.html#CDN\">vue<\/a>\u30fb<a href=\"https:\/\/vuetifyjs.com\/ja\/getting-started\/quick-start\/#cdn-%E3%81%AE%E4%BD%BF%E7%94%A8\">vuetify<\/a>\u30fb<a href=\"https:\/\/vuetifyjs.com\/ja\/getting-started\/quick-start\/#%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB\">@mdi\/font<\/a> \u3092\u8aad\u307f\u8fbc\u3080\u3088\u3046\u306b\u3057\u307e\u3057\u305f\u3002<\/p>\n<p>vue\u3068vuetify\u306fmin.js\u30d5\u30a1\u30a4\u30eb\u304c\u63d0\u4f9b\u3055\u308c\u3066\u3044\u308b\u306e\u3067\u3001<code>NODE_ENV === production<\/code>\u306e\u5834\u5408\u306f\u305d\u3061\u3089\u3092\u8aad\u307f\u8fbc\u3080\u3088\u3046\u306b\u3057\u3066\u3042\u308a\u307e\u3059\u3002<\/p>\n<pre><code class=\"language-html\"> &lt;!DOCTYPE html&gt;\n &lt;html lang=&quot;en&quot;&gt;\n &lt;head&gt;\n   &lt;meta charset=&quot;UTF-8&quot;&gt;\n   &lt;title&gt;Title&lt;\/title&gt;\n+  &lt;link href=&quot;https:\/\/fonts.googleapis.com\/css?family=Roboto:100,300,400,500,700,900&quot; rel=&quot;stylesheet&quot;&gt;\n+  &lt;link href=&quot;https:\/\/cdn.jsdelivr.net\/npm\/@mdi\/font@5.1.45\/css\/materialdesignicons.min.css&quot; rel=&quot;stylesheet&quot;&gt;\n+  &lt;link href=&quot;https:\/\/cdn.jsdelivr.net\/npm\/vuetify@2.2.27\/dist\/vuetify.min.css&quot; rel=&quot;stylesheet&quot;&gt;\n &lt;\/head&gt;\n &lt;body&gt;\n   &lt;div style=&quot;width: 500px;&quot;&gt;\n     &lt;div id=&quot;app&quot;&gt;\/div&gt;\n   &lt;\/div&gt;  \n+  &lt;% if (NODE_ENV === &#039;production&#039;) { %&gt;\n+    &lt;script defer src=&quot;https:\/\/cdn.jsdelivr.net\/npm\/vue@2.6.11\/dist\/vue.min.js&quot;&gt;&lt;\/script&gt;\n+    &lt;script defer src=&quot;https:\/\/cdn.jsdelivr.net\/npm\/vuetify@2.2.27\/dist\/vuetify.min.js&quot;&gt;&lt;\/script&gt;\n+  &lt;% } else { %&gt;\n+    &lt;script defer src=&quot;https:\/\/cdn.jsdelivr.net\/npm\/vue@2.6.11\/dist\/vue.js&quot;&gt;&lt;\/script&gt;\n+    &lt;script defer src=&quot;https:\/\/cdn.jsdelivr.net\/npm\/vuetify@2.2.27\/dist\/vuetify.js&quot;&gt;&lt;\/script&gt;\n+  &lt;% } %&gt;\n   &lt;script defer src=&quot;popup.js&quot;&gt;&lt;\/script&gt;\n &lt;\/body&gt;\n &lt;\/html&gt;<\/code><\/pre>\n<h5>\u30d0\u30f3\u30c9\u30eb\u306b\u542b\u3081\u306a\u3044\u8a2d\u5b9a<\/h5>\n<p>vue\u3068vuetify\u306f\u5b9f\u88c5\u306e\u4e2d\u3067\u4f9d\u5b58\u3057\u3066\u3044\u308b\u306e\u3067\u3001<code>webpack.config.js<\/code>\u306e<a href=\"https:\/\/webpack.js.org\/configuration\/externals\/\">externals<\/a>\u3067\u30d0\u30f3\u30c9\u30eb\u306b\u542b\u3081\u306a\u3044\u3088\u3046\u306b\u6307\u5b9a\u3057\u307e\u3059\u3002key\u306b\u30e2\u30b8\u30e5\u30fc\u30eb\u540d\uff08\uff1dnode_modules\u306e\u4e0b\u306e\u30d5\u30a9\u30eb\u30c0\u540d\uff09\u3001value\u306b\u30b0\u30ed\u30fc\u30d0\u30eb\u5909\u6570\u540d\u3092\u6307\u5b9a\u3057\u307e\u3059\u3002\u30b0\u30ed\u30fc\u30d0\u30eb\u5909\u6570\u540d\u306f\u4e00\u56de\u52d5\u304b\u3057\u3066\u307f\u3066\u3001Chrome\u306econsole\u3067\u78ba\u8a8d\u3057\u307e\u3057\u305f\u3002<\/p>\n<pre><code class=\"language-javascript\">+  externals: {\n+    vue: &#039;Vue&#039;,\n+    vuetify: &#039;Vuetify&#039;,\n+  }<\/code><\/pre>\n<p>\u3053\u306e\u8a2d\u5b9a\u3092\u5165\u308c\u308b\u3053\u3068\u306b\u3088\u3063\u3066\u3001\u30d0\u30f3\u30c9\u30eb\u30d5\u30a1\u30a4\u30eb<code>popup.js<\/code>\u4e0a\u306f\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u3001node_modules\u306e\u4e0b\u306e\u30bd\u30fc\u30b9\u30b3\u30fc\u30c9\u3067\u306f\u306a\u304f\u3001\u5358\u7d14\u306b\u30b0\u30ed\u30fc\u30d0\u30eb\u5909\u6570\u3092\u30e2\u30b8\u30e5\u30fc\u30eb\u3068\u3057\u3066\u5b9a\u7fa9\u3057\u3066\u304f\u308c\u308b\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n<pre><code class=\"language-javascript\">[function(e, r) {\n    e.exports = Vue\n}\n, function(e, r) {\n    e.exports = Vuetify\n}\n, function(e, r) {\n\uff08\u4e2d\u7565\uff09 \n]<\/code><\/pre>\n<h5>\u30e9\u30a4\u30d6\u30e9\u30ea\u5229\u7528\u7b87\u6240\u306e\u4fee\u6b63<\/h5>\n<p>vuetify\u306e\u521d\u671f\u5316\u3092\u884c\u306a\u3063\u3066\u3044\u308b<code>vuetify.ts<\/code>\u306e\u4fee\u6b63\u3092\u884c\u3044\u307e\u3059\u3002  <\/p>\n<ul>\n<li>node_modules\u306e<code>vuetify\/lib<\/code>\u3067\u306f\u306a\u304f\u3001externals\u3067\u6307\u5b9a\u3057\u305f<code>vuetify<\/code>\u306b\u5909\u66f4<\/li>\n<li>\n<p>\u30d0\u30f3\u30c9\u30eb\u306b\u542b\u3081\u308b\u305f\u3081\u306bimport\u3057\u3066\u3044\u305f<code>@mdi\/font<\/code>\u3092\u524a\u9664<\/p>\n<pre><code class=\"language-typescript\">import Vue from &#039;vue&#039;\n-import Vuetify from &#039;vuetify\/lib&#039;\n+import Vuetify from &#039;vuetify&#039;\n-import &#039;@mdi\/font\/css\/materialdesignicons.css&#039;\n\nVue.use(Vuetify)\n\nexport default new Vuetify({\nicons: {\n iconfont: &#039;mdi&#039;,\n},\n})<\/code><\/pre>\n<\/li>\n<\/ul>\n<h5>\u958b\u767a\u6642\u3082\u53c2\u7167\u3057\u306a\u3044\u30e9\u30a4\u30d6\u30e9\u30ea\u3092\u524a\u9664<\/h5>\n<p><code>vue<\/code>\u3084<code>vuetify<\/code>\u306f\u958b\u767a\u6642\u306b\u53c2\u7167\u3057\u3066\u3044\u308b\u306e\u3067\u524a\u9664\u3067\u304d\u307e\u305b\u3093\u304c\u3001<code>@mdi\/font<\/code>\u306f\u3082\u3068\u3082\u3068\u30d0\u30f3\u30c9\u30eb\u306b\u542b\u3081\u308b\u305f\u3081\u3060\u3051\u306binstall\u3057\u3066\u305f\u306e\u3067\u524a\u9664\u3057\u307e\u3059\u3002<\/p>\n<pre><code class=\"language-sh\">npm uninstall @mdi\/font --save<\/code><\/pre>\n<h5>Chrome\u62e1\u5f35\u3067\u5916\u90e8\u30b9\u30af\u30ea\u30d7\u30c8\u3092\u8aad\u307f\u8fbc\u3081\u308b\u3088\u3046\u306b\u3059\u308b<\/h5>\n<p>\u666e\u901a\u306e\u30a2\u30d7\u30ea\u3067\u306f\u3053\u306e\u8a2d\u5b9a\u306f\u4e0d\u8981\u3067\u3059\u304c\u3001Chrome\u62e1\u5f35\u306e\u5834\u5408\u306f\u30a2\u30d7\u30ea\u5185\u3067\u4e0d\u6b63\u306ajavascript\u30b3\u30fc\u30c9\u304c\u5b9f\u884c\u3055\u308c\u306a\u3044\u3088\u3046\u306b\u3001<a href=\"https:\/\/developer.chrome.com\/extensions\/contentSecurityPolicy\">content_security_policy<\/a>\u306b\u3088\u3063\u3066\u5b9f\u884c\u53ef\u80fd\u306ajavascript\u30b3\u30fc\u30c9\u3092\u5236\u9650\u3059\u308b\u4ed5\u7d44\u307f\u304c\u3042\u308b\u306e\u3067\u3001\u3053\u306e\u8a2d\u5b9a\u3092<code>manifest.json<\/code>\u306b\u8a18\u8f09\u3057\u307e\u3059\u3002<\/p>\n<pre><code class=\"language-json\">-  &quot;content_security_policy&quot;: &quot;script-src &#039;self&#039; ; object-src &#039;self&#039;&quot;\n+  &quot;content_security_policy&quot;: &quot;script-src &#039;self&#039; https:\/\/cdn.jsdelivr.net\/npm\/vue@2.6.11\/ https:\/\/cdn.jsdelivr.net\/npm\/vuetify@2.2.27\/; object-src &#039;self&#039;&quot;<\/code><\/pre>\n<p>\u3061\u306a\u307f\u306b\u3001<code>vue-web-extension<\/code>\u3092\u4f7f\u3063\u3066\u3044\u308b\u5834\u5408\u306f\u3001<code>webpack.config.js<\/code>\u3067\u3053\u306e\u8a2d\u5b9a\u3092\u4e0a\u66f8\u304d\u3059\u308b\u3088\u3046\u306b\u306a\u3063\u3066\u3044\u308b\u306e\u3067\u3001\u305d\u3061\u3089\u3092\u4fee\u6b63\u3057\u307e\u3059\u3002<\/p>\n<h4>firebase<\/h4>\n<p>firebase\u3082\u540c\u69d8\u306bCDN\u304b\u3089\u8aad\u307f\u8fbc\u307f\u3001\u30d0\u30f3\u30c9\u30eb\u304b\u3089\u9664\u5916\u3057\u3066\u3044\u304d\u307e\u3059\u3002<\/p>\n<h5>CDN\u304b\u3089\u306e\u8aad\u307f\u8fbc\u307f<\/h5>\n<p>\u3053\u3061\u3089\u3082<code>popup.html<\/code>\u3092\u4fee\u6b63\u3057\u307e\u3059\u3002min.js\u304c\u5b58\u5728\u3057\u306a\u3044\u3063\u307d\u3044\u306e\u3067\u3001<a href=\"https:\/\/firebase.google.com\/docs\/web\/setup?hl=ja#cdn-%E3%81%8B%E3%82%89\">\u3053\u3061\u3089<\/a>\u3092\u53c2\u8003\u306b\u305d\u306e\u307e\u307e\u8aad\u307f\u8fbc\u307f\u307e\u3059\u3002\u3061\u306a\u307f\u306b<code>defer<\/code>\u3092\u3064\u3051\u308b\u3068\u975e\u540c\u671f\u3067\u30b9\u30af\u30ea\u30d7\u30c8\u3092\u8aad\u307f\u8fbc\u307f\u3001DOMContentLoaded\u306e\u76f4\u524d\u3067\u30b9\u30af\u30ea\u30d7\u30c8\u3092\u5b9f\u884c\u3057\u3066\u304f\u308c\u308b\u3089\u3057\u3044\u306e\u3067\u3059\u304c\u3001\u3053\u3061\u3089\u306e\u65b9\u304cChrome\u306eperformance\u3067\u30c1\u30a7\u30c3\u30af\u3057\u305f\u3068\u3053\u308d\u5c11\u3057\u3060\u3051\u65e9\u304f\u521d\u671f\u753b\u9762\u304c\u8868\u793a\u3055\u308c\u308b\u3088\u3046\u3067\u3057\u305f\u306e\u3067\u3001<code>defer<\/code>\u3092\u8a2d\u5b9a\u3057\u3066\u3042\u308a\u307e\u3059\u3002<\/p>\n<pre><code class=\"language-html\">+  &lt;script defer src=&quot;https:\/\/www.gstatic.com\/firebasejs\/7.14.2\/firebase-app.js&quot;&gt;&lt;\/script&gt;\n+  &lt;script defer src=&quot;https:\/\/www.gstatic.com\/firebasejs\/7.14.2\/firebase-auth.js&quot;&gt;&lt;\/script&gt;\n+  &lt;script defer src=&quot;https:\/\/www.gstatic.com\/firebasejs\/7.14.2\/firebase-firestore.js&quot;&gt;&lt;\/script&gt;\n   &lt;script defer src=&quot;popup.js&quot;&gt;&lt;\/script&gt;\n &lt;\/body&gt;<\/code><\/pre>\n<h5>\u30d0\u30f3\u30c9\u30eb\u306b\u542b\u3081\u306a\u3044\u8a2d\u5b9a<\/h5>\n<p>webpack.config.js\u306eexternals\u3092\u4fee\u6b63\u3057\u307e\u3059\u3002\u63a2\u3059\u3068\u3044\u308d\u3093\u306a\u8a18\u4e8b\u3067\u3044\u308d\u3093\u306a\u6307\u5b9a\u65b9\u6cd5\u304c\u7d39\u4ecb\u3055\u308c\u3066\u307e\u3059\u304c\u3001\u7d50\u5c40\u4ee5\u4e0b\u306e\u8a2d\u5b9a\u3067\u554f\u984c\u306a\u304f\u9664\u5916\u3067\u304d\u307e\u3057\u305f\u3002<\/p>\n<pre><code class=\"language-javascript\">   externals: {\n     vue: &#039;Vue&#039;,\n     vuetify: &#039;Vuetify&#039;,\n+    firebase: &#039;firebase&#039;,\n   }<\/code><\/pre>\n<ul>\n<li>\u30c8\u30c3\u30d7\u30ec\u30d9\u30eb\u306e\u30e2\u30b8\u30e5\u30fc\u30eb\u540d\uff08@\u306f\u30e6\u30fc\u30b6\u540d\u3092\u8868\u3059namespece\u3067\u3042\u308b\u3053\u3068\u3092\u793a\u3057\u3066\u3044\u308b\u3060\u3051\u306a\u306e\u3067\u4e0d\u8981\uff09\u3092\u6307\u5b9a\u3059\u308b\n<ul>\n<li>firebase\/auth\u3084firebase\/firestore\u306f\u3001firebase\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3092\u901a\u3058\u3066\u547c\u3073\u51fa\u3059\u306e\u3067\u500b\u5225\u8a2d\u5b9a\u306f\u4e0d\u8981<\/li>\n<\/ul>\n<\/li>\n<li>\u30b0\u30ed\u30fc\u30d0\u30eb\u5909\u6570\u540d\u306f<code>firebase<\/code>\u3092\u6307\u5b9a\u3059\u308b<\/li>\n<\/ul>\n<h5>\u30e9\u30a4\u30d6\u30e9\u30ea\u5229\u7528\u7b87\u6240\u306e\u4fee\u6b63<\/h5>\n<p>\u3082\u3068\u3082\u3068\u3001node_modules\u306e\u4e0b\u306e<code>firebase\/app<\/code>\u3092import\u3057\u3066\u307e\u3057\u305f\u304c\u3001externals\u3067\u6307\u5b9a\u3057\u305f<code>firebase<\/code>\u306b\u5909\u66f4\u3057\u307e\u3059\u3002<br \/>\n\u305d\u306e\u4e0a\u3067\u3001<code>firebase\/auth<\/code>\u3068<code>firebase\/firestore<\/code>\u306f\u30b0\u30ed\u30fc\u30d0\u30eb\u5909\u6570\u306e<code>firebase<\/code>\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3092\u5229\u7528\u3059\u308b\u3053\u3068\u306b\u306a\u308b\u306e\u3067\u3001\u3053\u3053\u306eimport\u6587\u306f\u524a\u9664\u3057\u307e\u3059\u3002<\/p>\n<pre><code class=\"language-typescript\">-import * as firebase from &#039;firebase\/app&#039;\n+import * as firebase from &#039;firebase&#039;\n-import &#039;firebase\/auth&#039;\n-import &#039;firebase\/firestore&#039;\n\n const firebaseConfig: { [key: string]: string } = {\n }\n\n firebase.initializeApp(firebaseConfig)\n\n export default firebase<\/code><\/pre>\n<h5>Chrome\u62e1\u5f35\u3067\u5916\u90e8\u30b9\u30af\u30ea\u30d7\u30c8\u3092\u8aad\u307f\u8fbc\u3081\u308b\u3088\u3046\u306b\u3059\u308b<\/h5>\n<p>\u3053\u3061\u3089\u3082Chrome\u62e1\u5f35\u3067\u4e0a\u8a18\u306e\u30b9\u30af\u30ea\u30d7\u30c8\u3092\u5b9f\u884c\u3067\u304d\u308b\u3088\u3046\u306b\u3001content_security_poricy\u306e\u8a2d\u5b9a\u3092<code>manifest.json<\/code>\u306b\u8a18\u8f09\u3057\u307e\u3059\u3002\u3061\u306a\u307f\u306b\u3001\u6307\u5b9a\u3057\u305fURL\u306e\u6700\u5f8c\u306e<code>\/<\/code>\u306f\u5fc5\u8981\u3067\u3059\u3002<\/p>\n<pre><code class=\"language-json\">-  &quot;content_security_policy&quot;: &quot;script-src &#039;self&#039; https:\/\/cdn.jsdelivr.net\/npm\/vue@2.6.11\/ https:\/\/cdn.jsdelivr.net\/npm\/vuetify@2.2.27\/; object-src &#039;self&#039;&quot;\n+  &quot;content_security_policy&quot;: &quot;script-src &#039;self&#039; https:\/\/www.gstatic.com\/firebasejs\/ https:\/\/cdn.jsdelivr.net\/npm\/vue@2.6.11\/ https:\/\/cdn.jsdelivr.net\/npm\/vuetify@2.2.27\/; object-src &#039;self&#039;&quot;<\/code><\/pre>\n<h4>\u7d50\u679c\u78ba\u8a8d<\/h4>\n<p>\u3053\u3053\u307e\u3067\u306e\u5bfe\u5fdc\u3067\u3001\u30a8\u30f3\u30c8\u30ea\u30fc\u30dd\u30a4\u30f3\u30c8\u304b\u3089\u306e\u4f9d\u5b58\u95a2\u4fc2\u306b\u3064\u3044\u3066\u306f\u4e00\u901a\u308a\u9664\u5916\u3067\u304d\u305f\u3068\u601d\u3044\u307e\u3059\u306e\u3067\u3001<code>npm run build<\/code>\u3067\u672c\u756a\u7528\u306e\u30b3\u30fc\u30c9\u3092\u51fa\u529b\u3057\u3066\u307f\u307e\u3057\u305f\u3002\u3059\u308b\u3068\u3001\u30d0\u30f3\u30c9\u30eb\u30b5\u30a4\u30ba\u304c\u63a8\u5968\u30b5\u30a4\u30ba\uff08244 KB\uff09\u3092\u8d85\u3048\u3066\u3044\u308b\u3068\u3044\u3046\u30ef\u30fc\u30cb\u30f3\u30b0\u306f\u51fa\u306a\u304f\u306a\u308a\u307e\u3057\u305f\u3002<\/p>\n<pre><code>  options\/options.js (48.3 KiB)\n  popup\/popup.js (145 KiB)<\/code><\/pre>\n<p>\u306b\u306a\u3063\u305f\u306e\u3067\u3001\u307e\u3042\u826f\u3055\u305d\u3046\u3067\u3059\u3002<\/p>\n<p>\u3067\u3001\u30d0\u30f3\u30c9\u30eb\u306e\u69cb\u6210\u306f\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u306a\u308a\u307e\u3057\u305f\u3002<br \/>\n<img src=\"http:\/\/localhost:8000\/wp-content\/uploads\/2021\/01\/20200526095022-400x234.png\" alt=\"\" \/><\/p>\n<p>\u3088\u304f\u898b\u308b\u3068\u3001vuetify\u306ecomponent\u304c\u6b8b\u3063\u3066\u3044\u307e\u3059\u3002\u305f\u3076\u3093\u3053\u308c\u306f<code>vuetify-loader<\/code>\u306e<code>VuetifyLoaderPlugin<\/code>\u3092\u4f7f\u3063\u3066\u3044\u308b\u305f\u3081\u3068\u8003\u3048\u3089\u308c\u307e\u3059\u306e\u3067\u3001\u6b21\u306f\u3053\u308c\u3092\u5bfe\u5fdc\u3057\u3088\u3046\u3068\u601d\u3044\u307e\u3059\u3002<\/p>\n<h3>\u30d0\u30f3\u30c9\u30eb\u6642\u306b\u5b9f\u884c\u3055\u308c\u308bPlugin<\/h3>\n<h4>VuetifyLoaderPlugin<\/h4>\n<p>\u3053\u306e\u30d7\u30e9\u30b0\u30a4\u30f3\u306fvuetify\u306eUI\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u5229\u7528\u3059\u308b\u7b87\u6240\u3092\u81ea\u52d5\u7684\u306b\u691c\u77e5\u3057\u3066\u3001\u81ea\u52d5\u7684\u306bUI\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306eimport\u3092\u884c\u3063\u3066\u304f\u308c\u308bPlugin\u3067\u304b\u306a\u308a\u4fbf\u5229\u306a\u306e\u3067\u5c0e\u5165\u3057\u3066\u3044\u307e\u3057\u305f\u304c\u3001CDN\u5316\u3057\u305f\u5f8c\u306f\u305d\u3082\u305d\u3082\u3053\u306eimport\u304c\u4e0d\u8981\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n<p>\u3061\u306a\u307f\u306b\u3001import\u306e\u51e6\u7406\u81ea\u4f53\u306f\u3001<code>loader.js<\/code>\u306e\u4e2d\u306e\u4ee5\u4e0b\u306e\u3042\u305f\u308a\u3067\u5b9f\u884c\u3055\u308c\u3066\u3044\u308b\u3088\u3046\u3067\u3059\u3002<\/p>\n<pre><code class=\"language-javascript\">function install (install, content, imports) {\n  if (imports.length) {\n    let newContent = &#039;\/* vuetify-loader *\/\\n&#039;\n    newContent += `import ${install} from ${loaderUtils.stringifyRequest(this, &#039;!&#039; + runtimePaths[install])}\\n`\n    newContent += imports.map(i =&gt; i[1]).join(&#039;\\n&#039;) + &#039;\\n&#039;\n    newContent += `${install}(component, {${imports.map(i =&gt; i[0]).join(&#039;,&#039;)}})\\n`\n\n    \/\/ Insert our modification before the HMR code\n    const hotReload = content.indexOf(&#039;\/* hot reload *\/&#039;)\n    if (hotReload &gt; -1) {\n      content = content.slice(0, hotReload) + newContent + &#039;\\n\\n&#039; + content.slice(hotReload)\n    } else {\n      content += &#039;\\n\\n&#039; + newContent\n    }\n  }\n\n  return content\n}<\/code><\/pre>\n<h4>Plugin\u306e\u524a\u9664<\/h4>\n<p>\u306a\u306e\u3067\u3001\u5358\u7d14\u306b<code>webpack.config.js<\/code>\u304b\u3089\u8a72\u5f53\u306ePlugin\u3092\u524a\u9664\u3057\u307e\u3059\u3002<\/p>\n<pre><code class=\"language-javascript\"> const { version } = require(&#039;.\/package.json&#039;);\n-const VuetifyLoaderPlugin = require(&#039;vuetify-loader\/lib\/plugin&#039;);\n const BundleAnalyzerPlugin = require(&#039;webpack-bundle-analyzer&#039;).BundleAnalyzerPlugin;\n (\u4e2d\u7565)\n   plugins: [\n     new BundleAnalyzerPlugin(),\n-    new VuetifyLoaderPlugin(),<\/code><\/pre>\n<p>\u3055\u3089\u306b\u3001package.json\u304b\u3089\u3082\u524a\u9664\u3057\u307e\u3059\u3002<\/p>\n<pre><code class=\"language-sh\">npm uninstall vuetify-loader --save<\/code><\/pre>\n<h4>\u7d50\u679c\u78ba\u8a8d<\/h4>\n<p>\u6539\u3081\u3066\u3001<code>npm run build<\/code>\u3067\u30d0\u30f3\u30c9\u30eb\u30d5\u30a1\u30a4\u30eb\u3092\u51fa\u529b\u3057\u306a\u304a\u3059\u3068\u3001\u3055\u3089\u306b\u30d0\u30f3\u30c9\u30eb\u30b5\u30a4\u30ba\u304c\u524a\u6e1b\u3067\u304d\u3066\u3044\u307e\u3057\u305f\u3002<\/p>\n<pre><code>  options\/options.js (16.5 KiB)\n  popup\/popup.js (21.2 KiB)<\/code><\/pre>\n<p>\u30d0\u30f3\u30c9\u30eb\u306e\u69cb\u6210\u306f\u3053\u3093\u306a\u611f\u3058\u3067\u3059\u3002<br \/>\n<img src=\"http:\/\/localhost:8000\/wp-content\/uploads\/2021\/01\/20200528230156-400x251.png\" alt=\"\" \/><\/p>\n<p>vuetify\u306eUI \u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u95a2\u4fc2\u3082\u306a\u304f\u306a\u308a\u307e\u3057\u305f\u3002<\/p>\n<p>\u3053\u308c\u306b\u3066\u5bfe\u5fdc\u5b8c\u4e86\uff01\uff01\uff01<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Vue+Typescript+Firebase\u3067Chrome\u62e1\u5f35\u3092\u4f5c\u3063\u3066\u3044\u308b\u306e\u3067\u3059\u304c\u3001\u30d0\u30f3\u30c9\u30eb\u30b5\u30a4\u30ba\u304c\u5927\u304d\u3044\u3088\u3068\u8b66\u544a\u304c\u51fa\u305f\u306e\u3067\u5bfe\u5fdc\u3057\u3088\u3046\u3068\u601d\u3044\u307e\u3059\u3002 \u4f7f\u3063\u3066\u3044\u308b\u6280\u8853 Chrome Extension Vue+Vuetify TypeScript Firebase Authentication Cloud Firestore \u30ef\u30fc\u30cb\u30f3\u30b0\u306e\u5185\u5bb9 npm run build\uff08cross-env NODE_ENV=production webpack &#8211;hide-modules\uff09\u3067\u672c\u756a\u7528\u306e\u30b3\u30fc\u30c9\u3092\u51fa\u529b\u3057\u3066\u307f\u305f\u3068\u3053\u308d\u3001\u30d0\u30f3\u30c9\u30eb\u30b5\u30a4\u30ba\u304c\u63a8\u5968\u30b5\u30a4\u30ba\uff08244 KB\uff09\u3092\u8d85\u3048\u3066\u3044\u308b\u3068\u3044\u3046\u30ef\u30fc\u30cb\u30f3\u30b0\u304c\u51fa\u307e\u3057\u305f\u3002 WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB). Thi <a href=\"http:\/\/localhost:8000\/2020\/05\/vue-firebase-reduce-bundle-size.html\" class=\"read-more button-fancy -red\"><span class=\"btn-arrow\"><\/span><span class=\"twp-read-more text\">Continue Reading<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[3,12,25],"tags":[],"_links":{"self":[{"href":"http:\/\/localhost:8000\/wp-json\/wp\/v2\/posts\/250"}],"collection":[{"href":"http:\/\/localhost:8000\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/localhost:8000\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/localhost:8000\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/localhost:8000\/wp-json\/wp\/v2\/comments?post=250"}],"version-history":[{"count":1,"href":"http:\/\/localhost:8000\/wp-json\/wp\/v2\/posts\/250\/revisions"}],"predecessor-version":[{"id":254,"href":"http:\/\/localhost:8000\/wp-json\/wp\/v2\/posts\/250\/revisions\/254"}],"wp:attachment":[{"href":"http:\/\/localhost:8000\/wp-json\/wp\/v2\/media?parent=250"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/localhost:8000\/wp-json\/wp\/v2\/categories?post=250"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/localhost:8000\/wp-json\/wp\/v2\/tags?post=250"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}