Vue.js前端性能优化

动态路由加载

const router = new Router({
  mode: 'history',  //去掉url中的#
  routes: [
    {
      path: '/about',
      name: 'about',
      component: () => import('@/components/About'),
    },
    {
      path: '*',
      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 compression-webpack-plugin@1.1.11

然后build构建生成版本

npm run build

修改Nginx配置文件nginx.conf，路径/etc/nginx

##
# 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;