Vue.js - Dynamic & Async Components
Async Components 可讓Vue.js建立大型應用:
https://vuejs.org/v2/guide/components-dynamic-async.html#Async-Components
推薦async components可和Webpack’s code-splitting feature搭配使用:
- 先了解Webpack’s code-splitting feature:
- lodash:https://jigsawye.com/2017/09/04/make-good-use-of-lodash/
https://webpack.js.org/guides/code-splitting/
- 3個方法中,應選Dynamic Imports,達成動態載入某元件目的。
- * prefetch: resource is probably needed for some navigation in the future
* preload: resource might be needed during the current navigation
Simple prefetch example can be having a HomePage component, which renders a LoginButtoncomponent which then on demand loads a LoginModal component after being clicked.
Simple preload example can be having a Component which always depends on a big library that should be in a separate chunk.
Using webpackPreload incorrectly can actually hurt performance, so be careful when using it.
- Vue.js和webpack code splitting應用的例子:
- Code splitting is the idea that a bundle can be fragmented into smaller files allowing the user to only download what code they need, when they need it.
- https://vuejsdevelopers.com/2017/07/03/vue-js-code-splitting-webpack/
- 使用Browserify的開發者不適用async loading,但有解法:https://github.com/vuejs/vuejs.org/issues/620
https://vuejs.org/v2/guide/components-dynamic-async.html#Async-Components
推薦async components可和Webpack’s code-splitting feature搭配使用:
- 先了解Webpack’s code-splitting feature:
- lodash:https://jigsawye.com/2017/09/04/make-good-use-of-lodash/
https://webpack.js.org/guides/code-splitting/
- 3個方法中,應選Dynamic Imports,達成動態載入某元件目的。
- * prefetch: resource is probably needed for some navigation in the future
* preload: resource might be needed during the current navigation
Simple prefetch example can be having a HomePage component, which renders a LoginButtoncomponent which then on demand loads a LoginModal component after being clicked.
Simple preload example can be having a Component which always depends on a big library that should be in a separate chunk.
Using webpackPreload incorrectly can actually hurt performance, so be careful when using it.
- Vue.js和webpack code splitting應用的例子:
- Code splitting is the idea that a bundle can be fragmented into smaller files allowing the user to only download what code they need, when they need it.
- https://vuejsdevelopers.com/2017/07/03/vue-js-code-splitting-webpack/
- 使用Browserify的開發者不適用async loading,但有解法:https://github.com/vuejs/vuejs.org/issues/620
留言
張貼留言