Vue项目首屏加载优化方案 - 路由懒加载 & Nginx Gzip

路由懒加载方案

当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。

原来路由配置文件

没有用到路由懒加载时，我们一般是这样配置的。

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

import Blog from '@/components/blog/index'
import Article from '@/components/blog/article'

Vue.use(Router)

export default new Router({
   
    mode: 'history',
    routes: [
        {
   
			path: '/blog', 
			name: 'blog', 
			component: Blog
		},
		{
   
			path: