Vue项目首屏加载速度优化

路由懒加载

1.作用

提升用户体验，提升首屏组件加载速度，解决白屏问题

2.代码示例

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

Vue.use(Router)
export default new Router({
	routes: [
    {
    	path: '/',
      name: 'HelloWorld',
      // 方法一：vue异步组件实现
      // component: resolve => (require(['@/components/HelloWorld'], resolve))
      // 方法二：import方法(常用)
      component: () => import('@/components/HelloWorld')
    }
  ]
})

组价懒加载

代码示例

<template>
	<div class="hello">
    <hello-world></hello-world>
    111
  </div>
</template>

<script>
export default {
	components: {
  	// 方法一
    'HelloWorld': () => import('./HelloWorld'),
    // 方法二
    // HelloWorld': resolve => (['./HelloWorld'], resolve)
  }
}
</script>

通过线上引入CDN链接

1.找到项目中的index.html文件

<script src='https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.min.js'></script>

2.配置vue.config.js

externals: {
  // 键：表示导入包语法from后面跟着的名称
  // 值：表示script引入js文件时，在全局环境中的变量名称
	vue: 'Vue',
  axios: 'axios',
  'vue-router': 'Router'
}

gzip暴力压缩

1.nginx开启gzip模式

server {
	listen 8103;
  server_name ***;
  # 开启gzip
  gzip on;
  # 进行压缩的文件类型
  gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/png image/gif;
  # 是否在http header中添加Vary: Accept-Encofing,建议开启
  gzip_vary on;
}

2.Vue开启gzip

安装依赖

npm install compression-webpack-plugin@1.1.12 --save-dev

配置gzip

/* vue.config.js */
build: {
	productionGzip: true,
  productionGzipExtensions: ['js', 'css']
}

拓展：分析文件大的原因

利用webpack-bundle-analyzer分析器，分析项目依赖关系

/* vue.config.js */
const BunldeAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

plugin: [
	new BunldeAnalyzerPlugin(),
]

然后运行npm run build打包命令，浏览器会出现如下页面，此时我们就能看到哪些文件里面到底包含了什么东西：