Vue 单页应用的首屏优化

淡淡的烟草味﹌ 2022-05-26 00:42 278阅读 0赞

对于单页应用，要在一个页面上为用户提供产品的所有功能，在这个页面加载的时候，首先要加载大量的静态资源，这个加载时间相对比较长。所以我们需要做一些相应的优化，减少响应时间，尽快把首屏显示出来。

#### 1、压缩代码 ####

无论是否为单页应用，代码的压缩都是要做的。  
对于vue-cli生成的项目，在Webpack配置文件中使用了UglifyJsPlugin进行代码的压缩：

//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引入

在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中文文档][webpack Externals]。

--------------------

#### 4、路由懒加载 ####

[官方文档在此][Link 1]，更详细的内容参见文档。

路由懒加载也就是 把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件。  
结合 Vue 的[异步组件][Link 2]和 Webpack 的[代码分割功能][Link 3]，轻松实现路由组件的懒加载。  
在router中，我们平时是这样引入组件的：

import Foo from './Foo.vue'

文档中指出，如下定义一个能够被 Webpack 自动代码分割的异步组件

const Foo = () => import('./Foo.vue')

在路由配置中什么都不需要改变，只需要像往常一样使用 Foo：

const router = new VueRouter({
      routes: [
        { path: '/foo', component: Foo }
      ]
    })

--------------------

暂时先记下这四种方法，优化这件事，还要在项目里好好钻研~

[webpack Externals]: https://doc.webpack-china.org/configuration/externals/
[Link 1]: https://router.vuejs.org/zh-cn/advanced/lazy-loading.html
[Link 2]: https://cn.vuejs.org/guide/components.html#%E5%BC%82%E6%AD%A5%E7%BB%84%E4%BB%B6
[Link 3]: https://doc.webpack-china.org/guides/code-splitting-async/#require-ensure-/