“离子服务”和“离子构建浏览器”之间的区别

Question

我正在做一个项目来创建网站的移动应用程序版本（网站已经部署和服务），我们使用的是 Ionic v1.7.16。

我的上级已经审查过我们是否可以在 Ionic 项目上工作，然后也将其部署到网络上（替换以前的网络版本），以在移动设备和浏览器（桌面）上拥有几乎相同的界面和用户体验.

我读过“离子浏览器平台”，对它有一点经验，但我没有遇到过问题。

我的问题与标题相同。 “离子服务”和“离子构建浏览器”有区别吗？

我的观察：

• 在将“浏览器”作为平台添加到项目时，会添加浏览器版本的 cordova 插件，我相信这可以防止平台之间的不一致。
• “离子服务”和“离子运行浏览器”之间的界面和功能完全相同。我还使用“python -m SimpleHTTPServer”来查看/模拟如果我们部署浏览器版本会是什么样子，它也与前两个相同。

Ionic 浏览器平台仍处于测试阶段，我还没有遇到像 Ionic 平台 android 那样的太多资源。还感谢有关各种 Ionic 浏览器平台的常见问题解答/资源。

Answer 1

我正在使用我的第一个 Ionic2 RC1 应用程序，该应用程序添加了 2 个平台（Android 和浏览器），我很欣赏这些命令之间的差异...

它生成（在我的例子中）这个输出：

---

1. Serve 构建了一个 dev 环境，具有实时重新加载支持且无需缩小

$ ionic serve browser

myproject_root
|-- www (13 MB)
|-- 资产 (1.40 MB)
|-- 构建 (11.5 MB)
|-- main.css (729.90 KB)
|-- main.js (3.50 MB)
|-- main.js.map (7.10 MB)
|-- polyfills.js (84.10 KB)
|-- index.html (1.20 KB)
|-- manifest.json (313 B)
|-- service-worker.js (3.60 KB)

---

1. Build 构建一个 prod 环境

$ ionic build browser

myproject_root
|-- www (5.60 MB)
|-- 资产 (1.40 MB)
|-- 构建 (4.20 MB)
|-- main.css (636.70 KB)
|-- main.js (1.60 MB)
|-- main.js.map (1.90 MB)
|-- polyfills.js (84.10 KB)
|-- index.html (1.20 KB)
|-- manifest.json (313 B)
|-- service-worker.js (3.60 KB)

此外，我还发现了其他可部署的输出：

myproject_root
|-- 平台
|-- 浏览器
|-- www (5.70 MB)
|-- 资产 (1.40 MB)
|-- 构建 (4.20 MB)
|-- main.css (636.70 KB)
|-- main.js (1.50 MB)
|-- main.js.map (1.80 MB)
|-- polyfills.js (84.10 KB)
|-- cordova-js-src (9.40 KB)
|-- confighelper.js (3.00 KB)
|-- exec.js (4.70 KB)
|-- platform.js (1.60 KB)
|-- 插件 (17.60 KB)
|-- cordova-plugin-device (5.70 KB)
|-- cordova-plugin-splashscreen (6.00 KB)
|-- cordova-plugin-statusbar (5.10 KB)
|-- 离子插件键盘 (643 B)
|-- config.xml (1.40 KB)
|-- confighelper.js (3.00 KB)
|-- cordova_plugins.js (2.00 KB)
       |-- cordova.js (59.00 KB)
       |-- exec.js (4.70 KB)
|-- platform.js (1.60 KB)
|-- index.html (1.30 KB)
|-- manifest.json (313 B)
|-- service-worker.js (3.60 KB)

---

总结

我可以在我的网络服务器中以不同的加载时间部署所有这 3 个文件夹。

这是我的测试简历停用缓存

1. ionic serve 的 ./www 输出

   • Safari 桌面 10.0.1
     • 在 12.02 秒内下载 10 个 4.26 MB 的资源。
   • Chrome 桌面 54.0.1
     • 在 9.06 秒内下载 13 个 3.60 MB 的资源。
     • Chrome 的控制台显示 'main.js:47628 Native：尝试调用 t.styleDefault，但 Cordova 不可用。确保包含 cordova.js 或在设备/模拟器中运行'

2. ionic build's ./www output

   • Safari 桌面 10.0.1
     • 在 7.08 秒内下载 20 个 2.39 MB 的资源。
   • Chrome 桌面 54.0.1
     • 在 5.47 秒内下载 23 个 1.80 MB 的资源。
     • Chrome 的控制台显示 'DEVICE READY FIRED AFTER 218 ms' & 'StatusBar is not supported'

3. ionic build's ./platforms/browser/www output

   • Safari 桌面 10.0.1
     • 在 6.66 秒内下载 10 个 2.31 MB 的资源。
   • Chrome 桌面 54.0.1
     • 在 5.09 秒内下载 13 个 1.80 MB 的资源。
     • Chrome 的控制台显示 'main.js:47628 Native：尝试调用 t.styleDefault，但 Cordova 不可用。确保包含 cordova.js 或在设备/模拟器中运行'

仅供参考：Android .apk 大小为 3.70 MB

---

我的结论

• “ionic serve”生成的开发环境尚未准备好投入生产。
• 'ionic build' 生成 2 个略有不同的生产环境，其中只有一个似乎正确加载了原生 Cordova 设备插件。如果 Ionic Team 的某个人读到了这篇文章，或许可以给我们一个理由……

免责声明：我最近读到 Ionic 团队正在考虑更改 webpack 的 rollup，因此这一切都可能在未来的 Ionic 2 版本中发生变化。

Answer 2

一位 Ionic 开发人员表示，他们的浏览器构建产品仍在进行中。您可以在此处查看 Harrington 的 cmets：

https://github.com/ionic-team/ionic/issues/10635

他建议现在使用npm run build --prod。

我还建议对 .js 文件和其他包含文件进行压缩、压缩和添加版本号，以强制刷新浏览器。

我注意到 Angular 2/4 在他们的生产构建过程中走得更远。我想知道ng build --prod 是不是 Ionic 团队想要去的地方，你是否也可以用它来构建 ionic 项目。

Angular 的好处是可以将 index.html 上的 include 更改为在末尾添加随机数，从而强制用户浏览器刷新 main.js 之类的文件，这很关键。