// router.js
import VueRouter from 'vue-router'
import Vue from 'vue'
Vue.use(VueRouter)

import Home from '@/pages/Home'
import Tree from '@/pages/Tree'
import SearchHighlight from '@/pages/SearchHighlight'
import Watermark from '@/pages/Watermark'

export default new VueRouter({
 routes: [
  {
   path: '/',
   component: Home,
   children: [
    {
     path: 'tree',
     name: 'Tree',
     component: Tree
    },
    {
     path: 'search-highlight',
     name: 'SearchHighlight',
     component: SearchHighlight
    },
    {
     path: 'watermark',
     name: 'Watermark',
     component: Watermark
    }
   ]
  }
 ]
})

// router.js
import VueRouter from 'vue-router'
import Vue from 'vue'
Vue.use(VueRouter)

export default new VueRouter({
 routes: [
  {
   path: '/',
   component: () => import('@/pages/Home'),
   children: [
    {
     path: 'tree',
     name: 'Tree',
     component: () => import('@/pages/Tree')
    },
    {
     path: 'search-highlight',
     name: 'SearchHighlight',
     component: () => import('@/pages/SearchHighlight')
    },
    {
     path: 'watermark',
     name: 'Watermark',
     component: () => import('@/pages/Watermark')
    }
   ]
  }
 ]
})

server {
    gzip on;
    gzip_types text/plain application/javascript application/x-javascript text/javascript text/xml text/css;
}

// yarn安装
yarn add compression-webpack-plugin -D
// 或npm
npm install compression-webpack-plugin --save-dev

const CompressionPlugin = require('compression-webpack-plugin')

module.exports = {
 // ...
 configureWebpack: {
  plugins: [
   new CompressionPlugin({
    test: /\.(js|css)"text-align: center">

　　经过压缩之后chunk-vendors仅有176K，比起原始的725K，压缩了近80%。像图片、字体之类的也可以用这个方法进行压缩，只要修改test配置项的正则表达式匹配这类文件即可。不过现在，还需要在nginx服务器配置一下静态压缩：


server {
  gzip on;
  gzip_types text/plain application/javascript application/x-javascript text/javascript text/xml text/css;
  
  gzip_static on;
}


　　gzip_static设置为on之后，这样在访问资源的时候，如果存在“资源路径.gz”的文件，则会直接返回该文件，其优先级高于动态的gzip。现在访问一下页面：

　　如果把鼠标悬指到chunk-vendors的size上，可以看到提示“176KB transfered over network, resource size: 724K”。如果你的项目出现请求资源文件太大，可以试试gzip之类的压缩手段，相信有立竿见影的效果。
　　到此这篇关于Vue项目打包压缩的实现(让页面更快响应)的文章就介绍到这了,更多相关Vue项目打包压缩内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！