前言

惯例 vue 我的项目打包后拜访，返回一个只蕴含 div 的 html，其余内容块都是通过 js 动静生成的。

存在两个比拟大的问题：

• 不利于 seo
• 首屏加载页慢，用户体验不好

本文是本人依据我的项目经验总结的计划，如有有余，欢送指出~

优化

SSR

SSR(Server-Side Rendering) 即服务端渲染，把 vue 组件在服务器端渲染为组装好的 HTML 字符串，而后将它们间接发送到浏览器，最初须要将这些动态标记混合在客户端上齐全可交互的应用程序。

应用 ssr 重新部署构建我的项目后：

能够看到返回的内容就曾经蕴含了首屏内容的 html 代码块，perfect!~.~

极速传送门 ：基于 vue-cli4.0+Typescript+SSR 的小 Demo

按需引入

应用 es6 module 进行按需引入

1. 路由文件中按需引入组件

# router.index.ts
export function createRouter() {
  return new Router({
    mode: 'history',
    routes: [
      {
        path: '/',
        name: 'Home',
        component: () => import(/* webpackChunkName: "Home" */ './views/Home.vue'),
      },
      {
        path: '/about',
        name: 'About',
        component: () => import(/* webpackChunkName: "about" */ './views/About.vue'),
      },
    ],
  });
}

2. 动态库按需引入模块，而不是全副

如 element-ui 库中，我只想用 button 组件：

import {button} from 'element-ui';

申请优化

1. css、js 搁置程序

css 文件放 header 中，js 文件放 body 前，不过 vue 曾经帮咱们解决好了~

2. 应用字体图标，icon 资源应用雪碧图

咱们晓得 http 建设一次连贯须要 3 次握手，太多的申请会影响加载速度

对不必要的动态资源咱们应该尽量减少，比方页面中的 icon 图标，如下腾讯官网的一个图片：

间接引入一张实现的图片，依据 background-position 来设置图片的地位

举荐一个制作雪碧图的网站：CSS Sprites Generator

应用 CDN

动态资源都上传到 CDN，进步访问速度

不应用 CDN：

应用 CDN：

能够看到应用 CDN 后，会对动态文件进行 GZIP 压缩，下载度度极大的进步

入口 chunk 优化

拆分入口 chunk 文件，拆散出一些动态的库，既能够减速打包，也能够优化加载。

如下，拆散了一些动态库：vuejs、axios、vuex 等，能够看到浏览器将开启多个下载线程进行下载。若没有拆散这些动态库，入口 chunk 将非常微小，加载速度可想而知~.~

拆散一个 element-ui 库，dev 环境咱们不必管，prod 环境下咱们才拆散，只须要在 vue 打包配置中移除该库即可：

# vue.config.js
configureWebpack: {
  externals:
    process.env.NODE_ENV === 'production'
      ? {'element-ui': 'element-ui',}
      : undefined,
},

# index.html 手动引入动态资源
<script src="/js/element-ui/element-ui.2.11.1.js"></script>

我的博客

END