Vue前端性能优化

动态路由加载

const router = new Router({
  mode: 'history',  //去掉url中的#
  routes: [
    {
      path: '/index',
      name: 'Index',
      component: () => import('@/components/Index')
    },
    {
      path: '/hello',
      name: 'HelloWorld',
      component: () => import('@/components/HelloWorld')
    },
    {
      path: '/list',
      name: 'BlogList',
      component: () => import('@/components/BlogList')
    },
    {
      path: '/',
      name: 'VueDjango',
      component: () => import('@/components/VueDjango')
    },
    {
      path: '/home',
      name: 'home',
      component: () => import('@/components/Home')
    },
    {
      path: '/archive',
      name: 'archive',
      component: () => import('@/components/Archive')
    },
    {
      path: '/post/:id',
      name: 'post',
      component: () => import('@/components/Single')
    },
    {
      path: '/about',
      name: 'about',
      component: () => import('@/components/About'),
    },
    {
      path: '*',
      name: 'notfound',
      component: () => import('@/components/NotFound')
    },
    {
      path: '/404',
      name: 'notfound',
      component: () => import('@/components/NotFound')
    },
    {
      path: '/category',
      name: 'category',
      component: () => import('@/components/Category')
    },
    {
      path: '/category/:name',
      name: 'categorypagetimeline',
      component: () => import('@/components/CategoryPageTimeline')
    },
    {
      path: '/tag/:name',
      name: 'tagpagetimeline',
      component: () => import('@/components/TagPageTimeline')
    },
    {
      path: '/love',
      name: 'love',
      meta: {
        requiresAuth: true  //需要登录才能访问
      },
      component: () => import('@/components/Love')
    },
    {
      path: '/login',
      name: 'login',
      component: () => import('@/components/Login')
    },
  ]
});

开启gzip

vue项目config/index.js

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

安装compression-webpack-plugin

由于我的webpack版本不高，所以装低版本的compression-webpack-plugin

npm install --save-dev [email protected]

然后build生成版本

npm run build

nginx.conf

##
# Gzip Settings
##

gzip on;
gzip_disable "msie6";

gzip_vary on;
gzip_proxied any;
gzip_comp_level 6;
gzip_buffers 16 8k;
gzip_http_version 1.1;
gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;