# Vue 單頁應用 的 首屏優化 2018年04月21日 16:59:14 閱讀數：710 版權聲明：本文為博主原創文章，未經博主允許不得轉載。 https://blog.csdn.net/latency_cheng/article/details/80031283 對于單頁應用，要在一個頁面上為用戶提供產品的所有功能，在這個頁面加載的時候，首先要加載大量的靜態資源，這個加載時間相對比較長。所以我們需要做一些相應的優化，減少響應時間，盡快把首屏顯示出來。 ## 1、壓縮代碼 無論是否為單頁應用，代碼的壓縮都是要做的。 對于vue-cli生成的項目，在Webpack配置文件中使用了UglifyJsPlugin進行代碼的壓縮： ~~~ //webpack.prod.conf.js plugins: [ //webpack.prod.conf.js plugins: [ ...... new UglifyJsPlugin({ uglifyOptions: { compress: { warnings: false } }, sourceMap: config.build.productionSourceMap, parallel: true }), ...... ] ~~~ ## 2、框架和插件按需加載 對于項目中用到的一些UI框架，比如 Onsen UI 、Mint UI 等等。如果我們只使用框架的部分組件，那么可以不要引入整個框架，按需引入用到的組件。 以Mint UI為例： ~~~ // 引入全部組件 import Mint from 'mint-ui'; import 'mint-ui/lib/style.css' Vue.use(Mint); // 按需引入部分組件 import { CellSwipe } from 'mint-ui'; Vue.component(CellSwipe.name, CellSwipe); ~~~ 對于一些插件，比如表單驗證插件Vuelidate，如果只是在個別組件中用的到，也可以不要在main.js里面引入，而是在組件中按需引入 // main.js中全部引入 import Vue from 'vue' import Vuelidate from 'vuelidate' Vue.use(Vuelidate) ~~~ // 組件中按需引入 import { validationMixin } from 'vuelidate' ~~~ ## 3、框架和插件從cdn中引入 在開發過程中，我們其實不會要去更改這些第三方庫，所以可以把它們放到cdn中，不參與打包。 在 index.html 中使用cdn引入 ~~~ <script src="https://cdn.example.com/vue/2.5.3/vue.js"></script> <script src="https://cdn.example.com/vuex/3.0.1/vuex.min.js"></script> <script src="https://cdn.example.com/axios/0.17.1/axios.min.js"></script> ~~~ 在webpack.config.js（webpack.base.config.js）中添加externals，表示這些文件可以被引用，但不參與打包。 ~~~ externals: { 'vue': 'Vue', 'vuex': 'Vuex', 'axios': 'axios' } ~~~ 這樣配置之后，我們依然可以用`import Vuex from 'vuex'`來引入模塊。 具有外部依賴(external dependency)的 bundle 可以在各種模塊上下文(module context)中使用，例如 CommonJS, AMD, 全局變量和 ES2015 模塊。 externals也支持string、array、object、function和regex等各種語法，詳情參見webpack Externals中文文檔。 ## 4、路由懶加載 官方文檔在此，更詳細的內容參見文檔。 路由懶加載也就是 把不同路由對應的組件分割成不同的代碼塊，然后當路由被訪問的時候才加載對應組件。 結合 Vue 的異步組件和 Webpack 的代碼分割功能，輕松實現路由組件的懶加載。 在router中，我們平時是這樣引入組件的： ~~~ import Foo from './Foo.vue' ~~~ 文檔中指出，如下定義一個能夠被 Webpack 自動代碼分割的異步組件 ~~~ const Foo = () => import('./Foo.vue') ~~~ 在路由配置中什么都不需要改變，只需要像往常一樣使用 Foo： ~~~ const router = new VueRouter({ routes: [ { path: '/foo', component: Foo } ] }) ~~~