Vue-cli3 vue-cli-service build --modern doesn't work - vue.js

After npm run build --modern runs successfully, I only see one app in the output. Shouldn't there be two?

After npm run build --modern runs successfully, I only see one app in the output. Shouldn't there be two?
Actually, the build --modern command creates two apps in dist/js (see dist/js/app.4e3aeb0e.js and dist/js/app-legacy.10b7d753.js):
➜ ls -al dist/js
total 1840
drwxr-xr-x 10 tony staff 320 Sep 2 19:25 .
drwxr-xr-x 7 tony staff 224 Sep 2 19:25 ..
-rw-r--r-- 1 tony staff 4772 Sep 2 19:25 app-legacy.10b7d753.js <-- LEGACY
-rw-r--r-- 1 tony staff 23682 Sep 2 19:25 app-legacy.10b7d753.js.map
-rw-r--r-- 1 tony staff 4718 Sep 2 19:25 app.4e3aeb0e.js <-- MODERN
-rw-r--r-- 1 tony staff 23625 Sep 2 19:25 app.4e3aeb0e.js.map
-rw-r--r-- 1 tony staff 80454 Sep 2 19:25 chunk-vendors-legacy.df5f2e07.js <-- LEGACY
-rw-r--r-- 1 tony staff 397535 Sep 2 19:25 chunk-vendors-legacy.df5f2e07.js.map
-rw-r--r-- 1 tony staff 63276 Sep 2 19:25 chunk-vendors.4fd390fb.js <-- MODERN
-rw-r--r-- 1 tony staff 326296 Sep 2 19:25 chunk-vendors.4fd390fb.js.map
The apps are selectively loaded in index.html. First, the modern-mode scripts are preloaded with <link rel="modulepreload"> in the <head>:
<link href=/js/app.4e3aeb0e.js rel=modulepreload as=script>
<link href=/js/chunk-vendors.4fd390fb.js rel=modulepreload as=script>
Those scripts are later loaded in the <body> (Note: Only browsers that support <script type="module"> would load the script):
<script type=module src=/js/chunk-vendors.4fd390fb.js></script>
<script type=module src=/js/app.4e3aeb0e.js></script>
Finally, there's a nomodule fallback to the legacy-mode scripts (Note: The nomodule attribute tells the browser to load the script only if module scripts are not supported):
<script>!function () { var e = document, t = e.createElement("script"); if (!("noModule" in t) && "onbeforeload" in t) { var n = !1; e.addEventListener("beforeload", function (e) { if (e.target === t) n = !0; else if (!e.target.hasAttribute("nomodule") || !n) return; e.preventDefault() }, !0), t.type = "module", t.src = ".", e.head.appendChild(t), t.remove() } }();</script>
<script src=/js/chunk-vendors-legacy.df5f2e07.js nomodule></script>
<script src=/js/app-legacy.10b7d753.js nomodule></script>
I compare the size between the --modern and no modern, there is not difference?
I'm not sure how you're comparing the sizes, but the modern build is in fact larger in size. In the following example, I built a Vue-CLI generated app (with default preset) twice (once without --modern and again with --modern), and renamed the output directories. See the size increase in dist-modern of index.html and js/:
➜ ls -al dist*
dist-default:
total 16
drwxr-xr-x 7 tony staff 224 Sep 2 19:25 .
drwxr-xr-x 13 tony staff 416 Sep 2 19:27 ..
drwxr-xr-x 3 tony staff 96 Sep 2 19:25 css
-rw-r--r-- 1 tony staff 1150 Sep 2 19:25 favicon.ico
drwxr-xr-x 3 tony staff 96 Sep 2 19:25 img
-rw-r--r-- 1 tony staff 724 Sep 2 19:25 index.html
drwxr-xr-x 6 tony staff 192 Sep 2 19:25 js
dist-modern:
total 16
drwxr-xr-x 7 tony staff 224 Sep 2 19:25 .
drwxr-xr-x 13 tony staff 416 Sep 2 19:27 ..
drwxr-xr-x 3 tony staff 96 Sep 2 19:25 css
-rw-r--r-- 1 tony staff 1150 Sep 2 19:25 favicon.ico
drwxr-xr-x 3 tony staff 96 Sep 2 19:25 img
-rw-r--r-- 1 tony staff 1213 Sep 2 19:25 index.html <-- LARGER
drwxr-xr-x 10 tony staff 320 Sep 2 19:25 js <-- LARGER

I couldn't find the docs you put in the image, but from docs it says:
--modern builds your app using Modern Mode, shipping native ES2015 code to modern browsers that support it, with auto fallback to a legacy bundle.
Then I'd interpret that as just one flexible app.
From the docs you mentioned at the comment, I found this relevant part:
The cool part though is that there are no special deployment requirements. The generated HTML file automatically employs the techniques discussed in Phillip Walton's excellent post:
The modern bundle is loaded with <script type="module">, in browsers that support it; they are also preloaded using <link rel="modulepreload"> instead.
The legacy bundle is loaded with <script nomodule>, which is ignored by browsers that support ES modules.
A fix for <script nomodule> in Safari 10 is also automatically injected.
With that I'm able to interpret the same way, one app that behaves differently according to the browser.
Talking about the size, I'm not sure if it's necessary more settings to enable that, but according to the docs, it's not. I encourage you to continue reading them, for me this is the best way to be up to date to any needs.

Related

Why does ag-grid code appears in my stenciljs component bundle?

I am trying to optimize a StencilJS component that uses ag-grid as third party dependency. Currently, rollup is adding ag-grid definitions to my bundle of code resulting in ~1Mb bundle size (archived).
Is there a way to achieve code separation in my bundle? or am I looking at things in the wrong way?
This component is used in a vue app alongside other 3rd party web component that also uses ag-grid. The ag-grid code will be duplicated in this scenario.
The component library is fairly simple with only 2 ts components:
$ ls -l src/components/product-picker/
total 30
-rw-r--r-- 1 197121 1692 Aug 8 10:35 readme.md
-rw-r--r-- 1 197121 41 Jul 9 13:38 product-filter.scss
-rw-r--r-- 1 197121 6521 Jul 19 09:34 product-filter.tsx
-rw-r--r-- 1 197121 371 Jun 25 11:51 product-picker.scss
-rw-r--r-- 1 197121 10089 Aug 8 10:21 product-picker.tsx
-rw-r--r-- 1 197121 1630 Jul 15 17:00 product-picker-grid.scss
drwxr-xr-x 1 197121 0 Jun 25 11:51 test/
This is how I import the ag-grid in my tsx component
import { ModuleRegistry } from '#ag-grid-community/core';
import { ClientSideRowModelModule } from '#ag-grid-community/client-side-row-model';
import { Grid, GridOptions } from '#ag-grid-community/core';
[...]
ModuleRegistry.registerModules([
ClientSideRowModelModule,
]);
#Component({
tag: 'product-picker',
styleUrl: 'product-picker.scss',
})
This is how the build files looks like:
$ ls -lh dist/esm/
total 2.2M
-rw-r--r-- 1 197121 1 Aug 8 10:35 index.js
-rw-r--r-- 1 197121 41K Aug 8 10:35 index-0f6f2d39.js
-rw-r--r-- 1 197121 931 Aug 8 10:35 loader.js
drwxr-xr-x 1 197121 0 Aug 8 10:35 polyfills/
-rw-r--r-- 1 197121 2.2M Aug 8 10:35 product-filter_2.entry.js
-rw-r--r-- 1 197121 947 Aug 8 10:35 product-picker.js
The product-filter_2.entry.js file has all the lines of code related to ag-grid.
Option 1
You could try using Typescript 3.8's type only imports :
That way, you get the type safety of TS, without including all of ag-grid in your Stencil bundle. This assumes that some other component on the page does include ag-grid in a way that makes it accessible to your Stencil component
Option 2
If you're using webpack you could consider marking ag-grid as an external library, not to be included in the generated bundle.
There's a similar question around not bundling the React runtime with every component, and instead adding it just once on the page with a script tag to reduce bundle sizes.
https://github.com/webpack/webpack/issues/1275#issuecomment-123846260
{
...
externals: {
// Use external version of React
"react": "React"
},
...
}
Option 3
You could not add ag-grid as a dependency to your Stencil project and instead rely on the existence of window.agGrid or something similar. Personally I dislike that option because at this point, you get no type safety in your Stencil project.

apache2.service: Control process exited, code=exited status=139

I install apache2 on ubuntu 18.04. This is fresh install with all default configuration.
I tried to start apache2 but failed. And this is what I see.
# systemctl status apache2.service
● apache2.service - The Apache HTTP Server
Loaded: loaded (/lib/systemd/system/apache2.service; enabled; vendor preset: enabled)
Drop-In: /lib/systemd/system/apache2.service.d
└─apache2-systemd.conf
Active: failed (Result: exit-code) since Wed 2020-03-11 23:17:35 WIB; 13s ago
Process: 9151 ExecStart=/usr/sbin/apachectl start (code=exited, status=139)
Mar 11 23:17:35 xdn.id systemd[1]: Starting The Apache HTTP Server...
Mar 11 23:17:35 xdn.id apachectl[9151]: Segmentation fault
Mar 11 23:17:35 xdn.id apachectl[9151]: Action 'start' failed.
Mar 11 23:17:35 xdn.id apachectl[9151]: The Apache error log may have more information.
Mar 11 23:17:35 xdn.id systemd[1]: apache2.service: Control process exited, code=exited status=139
Mar 11 23:17:35 xdn.id systemd[1]: apache2.service: Failed with result 'exit-code'.
Mar 11 23:17:35 xdn.id systemd[1]: Failed to start The Apache HTTP Server.
When I check /var/log/apache2/error.log, there is empty.
What's wrong with this error?
The "status=139" error must have something to do with having multiple, conflicting versions of PHP enabled.
I am running 18.04 and an old PHP site I run only locally ceased to work. I am guessing aptitude installed and enabled php7.2, possibly when I installed kubuntu-desktop a few weeks back.
Regardless, I had two versions of PHP enabled:
$ cd /etc/apache2/
$ l mods-*/php*
-rw-r--r-- 1 root root 867 Jun 9 2017 mods-available/php5.6.conf
-rw-r--r-- 1 root root 102 Jun 9 2017 mods-available/php5.6.load
-rw-r--r-- 1 root root 867 Mar 2 2017 mods-available/php7.0.conf
-rw-r--r-- 1 root root 102 Oct 1 2018 mods-available/php7.0.load
-rw-r--r-- 1 root root 855 Jul 7 2017 mods-available/php7.1.conf
-rw-r--r-- 1 root root 102 Jul 7 2017 mods-available/php7.1.load
-rw-r--r-- 1 root root 855 Feb 8 2019 mods-available/php7.2.conf
-rw-r--r-- 1 root root 102 Feb 8 2019 mods-available/php7.2.load
lrwxrwxrwx 1 root root 29 Jul 1 2017 mods-enabled/php5.6.conf -> ../mods-available/php5.6.conf
lrwxrwxrwx 1 root root 29 Jul 1 2017 mods-enabled/php5.6.load -> ../mods-available/php5.6.load
lrwxrwxrwx 1 root root 29 May 28 06:05 mods-enabled/php7.2.conf -> ../mods-available/php7.2.conf
lrwxrwxrwx 1 root root 29 May 28 06:05 mods-enabled/php7.2.load -> ../mods-available/php7.2.load
In my case, I am fine with using php5.6, because the site is not online and is purely for my local use only. So disabling 7.2 did the trick:
sudo a2dismod php7.2
Now my php mods-enabled are less confusing to apache3:
$ l mods-*/php*
-rw-r--r-- 1 root root 867 Jun 9 2017 mods-available/php5.6.conf
-rw-r--r-- 1 root root 102 Jun 9 2017 mods-available/php5.6.load
-rw-r--r-- 1 root root 867 Mar 2 2017 mods-available/php7.0.conf
-rw-r--r-- 1 root root 102 Oct 1 2018 mods-available/php7.0.load
-rw-r--r-- 1 root root 855 Jul 7 2017 mods-available/php7.1.conf
-rw-r--r-- 1 root root 102 Jul 7 2017 mods-available/php7.1.load
-rw-r--r-- 1 root root 855 Feb 8 2019 mods-available/php7.2.conf
-rw-r--r-- 1 root root 102 Feb 8 2019 mods-available/php7.2.load
lrwxrwxrwx 1 root root 29 Jul 1 2017 mods-enabled/php5.6.conf -> ../mods-available/php5.6.conf
lrwxrwxrwx 1 root root 29 Jul 1 2017 mods-enabled/php5.6.load -> ../mods-available/php5.6.load
Naturally for a live site one would want to disable php-5.6 and leave the php7.2 enabled, because you should run the newer version in real life.
sudo a2dismod php5.6
sudo a2enmod php7.2
Then the php mods should look like this:
$ l mods-*/php*
-rw-r--r-- 1 root root 867 Jun 9 2017 mods-available/php5.6.conf
-rw-r--r-- 1 root root 102 Jun 9 2017 mods-available/php5.6.load
-rw-r--r-- 1 root root 867 Mar 2 2017 mods-available/php7.0.conf
-rw-r--r-- 1 root root 102 Oct 1 2018 mods-available/php7.0.load
-rw-r--r-- 1 root root 855 Jul 7 2017 mods-available/php7.1.conf
-rw-r--r-- 1 root root 102 Jul 7 2017 mods-available/php7.1.load
-rw-r--r-- 1 root root 855 Feb 8 2019 mods-available/php7.2.conf
-rw-r--r-- 1 root root 102 Feb 8 2019 mods-available/php7.2.load
lrwxrwxrwx 1 root root 29 May 29 17:43 mods-enabled/php7.2.conf -> ../mods-available/php7.2.conf
lrwxrwxrwx 1 root root 29 May 29 17:43 mods-enabled/php7.2.load -> ../mods-available/php7.2.load
Don't forget to resatart the server!
systemctl restart apache2
Thanks to Pavel's comment for inspiring this line of research!
I got this error and I fixed it by enabling PHP version 8.0 (current stable) and disabling PHP version 7.4 (old) in my ubuntu 20.04 by these commands:
sudo a2dismod php7.4
sudo a2enmod php8.0
sudo service apache2 restart
After doing these check your apache status by:
sudo systemctl status apache2.service
It has to be green and must show you active (running).
NOTE: You can do this to any PHP version that you have and want to
change.

Perl6 script on MSYS2 causes 'failed to stat file' error

When I try to run a simple perl6 script on MSYS2-64 (bash.exe) on Windows 7 it says:
Could not open my-perl6-script.pl. Failed to stat file: no such file or directory
The same script runs perfectly fine on CMD.exe so I guess it's some incompatibility between perl6 and MSYS2.
$ perl6 -v returns:
This is Rakudo Star version 2018.04.1 built on MoarVM version 2018.04.1 implementing Perl 6.c.
The bin folder of perl6 is:
-rwxr-xr-x 1 win7 None 537938 May 11 2015 libgcc_s_sjlj-1.dll
-rw-r--r-- 1 win7 None 130262 May 7 2018 libmoar.dll.a
-rwxr-xr-x 1 win7 None 57681 May 11 2015 libwinpthread-1.dll
-rwxr-xr-x 1 win7 None 6633702 May 7 2018 moar.dll
-rwxr-xr-x 1 win7 None 57225 May 7 2018 moar.exe
-rw-r--r-- 1 win7 None 104 May 7 2018 nqp.bat
-rw-r--r-- 1 win7 None 104 May 7 2018 nqp-m.bat
lrwxrwxrwx 1 win7 None 23 Jun 19 2018 perl6 -> /c/rakudo/bin/perl6.exe
-rw-r--r-- 1 win7 None 242 May 7 2018 perl6.bat
lrwxrwxrwx 1 win7 None 23 Jun 19 2018 perl6.exe -> /c/rakudo/bin/perl6.bat
-rw-r--r-- 1 win7 None 248 May 7 2018 perl6-debug-m.bat
-rw-r--r-- 1 win7 None 242 May 7 2018 perl6-m.bat
It doesn't matter if I run the script using perl6, perl6.exe or perl6.bat; they all give the same error. I'd like to run perl6 scripts on MSYS2-64. What should I do? Thanks
I installed Rakudo for Windows and made a custom perl6 shell script:
#!/bin/sh
/c/rakudo/bin/moar --execname="$0" --libpath='C:\rakudo\share\nqp\lib' --libpath='C:\rakudo\share\nqp\lib' --libpath='C:\rakudo\share/perl6/lib' --libpath='C:\rakudo\share/perl6/runtime' 'C:\rakudo\share\perl6\runtime\perl6.moarvm' "$#"
I copied perl6.bat to perl6, changed the initial path to moar to an MSYS-style path, and changed from cmd to sh quoting and arugment conventions.
Example run, from cmd:
C:\Users\cxw>perl6 -v
This is Rakudo Star version 2019.03.1 built on MoarVM version 2019.03
implementing Perl 6.d.
From the shell opened by msys2_shell.cmd:
$ uname -a
MSYS_NT-6.1-7601 Desktop 3.0.7-338.x86_64 2019-07-03 08:42 UTC x86_64 Msys
$ export PATH="$PATH":~/bin
$ cat foo.p6
use v6;
(2+2).say;
$ perl6 foo.p6
4
For what it's worth, my Rakudo bin dir:
$ ls -l /c/rakudo/bin
total 8033
-rwxr-xr-x 1 cxw None 930663 May 11 2017 libgcc_s_seh-1.dll
-rw-r--r-- 1 cxw None 136146 Mar 30 21:55 libmoar.dll.a
-rwxr-xr-x 1 cxw None 56978 May 11 2017 libwinpthread-1.dll
-rwxr-xr-x 1 cxw None 7021172 Mar 30 21:55 moar.dll
-rwxr-xr-x 1 cxw None 64066 Mar 30 21:55 moar.exe
-rw-r--r-- 1 cxw None 126 Mar 30 21:56 nqp.bat
-rw-r--r-- 1 cxw None 126 Mar 30 21:56 nqp-m.bat
-rw-r--r-- 1 cxw None 242 Mar 30 21:56 perl6.bat
-rw-r--r-- 1 cxw None 248 Mar 30 21:56 perl6-debug-m.bat
-rw-r--r-- 1 cxw None 242 Mar 30 21:56 perl6-m.bat

How to freeze graphs from checkpoint directory for inception-v3 model?

I am fine tuning inception-v3 model flowers using this: https://github.com/tensorflow/models/tree/master/inception
I checkpointed the result in a directory. But in the directory I see files like these:
-rw-r--r-- 1 root root 389908432 Mar 15 21:46 model.ckpt-0.data-00000-of-00001
-rw-r--r-- 1 root root 72680 Mar 15 21:46 model.ckpt-0.index
-rw-r--r-- 1 root root 15189794 Mar 15 21:47 model.ckpt-0.meta
-rw-r--r-- 1 root root 135185788 Mar 15 22:36 events.out.tfevents.1489594533.f7d5defbed64
-rw-r--r-- 1 root root 72680 Mar 15 22:37 model.ckpt-4999.index
-rw-r--r-- 1 root root 389908432 Mar 15 22:37 model.ckpt-4999.data-00000-of-00001
-rw-r--r-- 1 root root 15189794 Mar 15 22:38 model.ckpt-4999.meta
-rw-r--r-- 1 root root 130 Mar 15 22:49 checkpoint
whereas I need outputs in directory similar to this:
-rw-r----- 1 107456 5000 223 Mar 2 2016 README.txt
-rw-r----- 1 107456 5000 43 Mar 2 2016 checkpoint
-rw-r----- 1 107456 5000 434903494 Mar 15 2016 model.ckpt-157585
For that I need to do something like freezing, but freezing needs to provide output_node_names. Can anyone guide me, what will be the output_node_names for inception-v3?
Also, I need a reliable way to freeze. Is tensorflow freezer tool okay for this?
I found the answer eventually.
One-line answer should be to use freezer.py available in upstream Tensorflow codebase. See the example on how to use that program from tests.
You may check the following link for sample:
https://gist.githubusercontent.com/morgangiraud/249505f540a5e53a48b0c1a869d370bf/raw/6cb0b4d497925517316a92f935ce5dccb6aafd17/medium-tffreeze-1.py

Apache: Error writing httpd-userdir.conf: Permission denied

I'm following this guide so that I can run websites on a local server using Apache on OS-X El Capitan. I'm trying to edit my httpd-userdir.conf file but when I try to save it gives me the error:
Error writing httpd-userdir.conf: Permission denied
Terminal shows that the permissions for my httpd-userdir.conf file is -rw-r--r-- , so I don't understand why I wouldn't be allowed to write?
drwxr-xr-x 15 root wheel 510B Feb 24 13:35 ./
drwxr-xr-x 11 root wheel 374B Feb 24 13:27 ../
-rw-r--r-- 1 root wheel 2.8K Jul 31 2015 httpd-autoindex.conf
-rw-r--r-- 1 root wheel 1.7K Jul 31 2015 httpd-dav.conf
-rw-r--r-- 1 root wheel 2.9K Jul 31 2015 httpd-default.conf
-rw-r--r-- 1 root wheel 1.1K Jul 31 2015 httpd-info.conf
-rw-r--r-- 1 root wheel 5.0K Jul 31 2015 httpd-languages.conf
-rw-r--r-- 1 root wheel 1.0K Jul 31 2015 httpd-manual.conf
-rw-r--r-- 1 root wheel 4.4K Jul 31 2015 httpd-mpm.conf
-rw-r--r-- 1 root wheel 2.2K Jul 31 2015 httpd-multilang-errordoc.conf
-rw-r--r-- 1 root wheel 13K Jul 31 2015 httpd-ssl.conf
-rw-r--r-- 1 root wheel 607B Jul 31 2015 httpd-userdir.conf
-rw-r--r-- 1 root wheel 607B Feb 24 13:35 httpd-userdir.conf.bak
-rw-r--r-- 1 root wheel 1.5K Jul 31 2015 httpd-vhosts.conf
-rw-r--r-- 1 root wheel 3.1K Jul 31 2015 proxy-html.conf
#erapert was correct, I just had to do sudo vi /etc/apache2/extra/httpd-userdir.conf and that allowed me to edit the file.