关于前端:Vue-ssr

组件生命周期钩子函数

应该防止在 beforeCreate 和 created 生命周期时产生全局副作用的代码。
例如：
其中应用 setInterval 设置 timer。在纯客户端 (client-side only) 的代码中，咱们能够设置一个 timer，而后在 beforeDestroy 或 destroyed 生命周期时将其销毁。
然而，因为在 SSR 期间并不会调用销毁钩子函数，所以 timer 将永远保留下来。为了防止这种状况，请将副作用代码移动到 beforeMount 或 mounted 生命周期中。

2 路由懒加载。

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export function createRouter () {
  return new Router({
    mode: 'history',
    routes: [{ path: '/', component: () => import('./components/Home.vue') },
      {path: '/item/:id', component: () => import('./components/Item.vue') }
    ]
  })
}

3 应用 Ui 框架上按需引入，按需加载。

routes: [{ path: "/", redirect: "index"},
    {
    path: "/",
    name: "home",
    component: resolve=>require(["@/views/home"],resolve),
    children: [
      {
        // 员工查问
        path: "/employees",
        component: resolve=>require(["@/components/employees"],resolve)
      },
    {
      // 首页
      path: "/index",
      component: resolve=>require(["@/views/index"],resolve)
    },

4 gzip 压缩

cnpm i compression-webpack-plugin -D

在 vue.congig.js 中引入并批改 webpack 配置:~~~~

    const CompressionPlugin = require('compression-webpack-plugin')

configureWebpack: (config) => {if (process.env.NODE_ENV === 'production') {
            // 为生产环境批改配置...
            config.mode = 'production'
            return {
                plugins: [new CompressionPlugin({
                    test: /\.js$|\.html$|\.css/, // 匹配文件名
                    threshold: 10240, // 对超过 10k 的数据进行压缩
                    deleteOriginalAssets: false // 是否删除原文件
                })]
            }
        }

在 index.js 中退出如下代码

productionGzip: false,
    
productionGzipExtensions: ['js', 'css']

5 应用 cdn

<body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
script src="https://unpkg.com/jquery@3.3.1/dist/jquery.js"></script> 
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<div id="app">    
 </div>
</body>

而后在 webpack.base.conf.js 中退出 externals

module.exports = {context: path.resolve(__dirname, '../'),
    
entry: {app: './src/main.js'},
externals: {
'jquery': 'jQuery',
    
'element-ui':'ELEMENT',
    
 'vue': 'Vue'

代码方面

v-if 和 v-show 依据场景抉择应用。
为 item 设置惟一 key 值，在列表数据遍历渲染时，为每一项 item 设置惟一的 key, 不便 vue 外部准确的找到该 item, 当 state 更新时，新的状态值和旧的状态值进行比照，较快的定位到。

用户体验上动手。
- 应用 better-click.js，解决 Iphone, 点击有 300 毫秒的问题。
- 菊花 Loading。
- 骨架屏。