VUE部署打包优化

1、路由组件使用懒加载 加载:

未启用懒加载:

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

  export default new Router({
         routes: [
                    {
                      path: '/',
                      name: 'HelloWorld',
                      component:HelloWorld
                    }
                  ]
                })

第一种: 使用vue异步组件

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

Vue.use(Router)
export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
   //去除 import HelloWorld from '@/components/HelloWorld' 引入步骤 直接 使用resolve异步组件
      component: resolve=>(require(["@/components/HelloWorld"],resolve))
    }
  ]
})

第二种:

import Vue from 'vue'
import Router from 'vue-router'
/* 使用es 引入import*/
const HelloWorld = ()=> import('@/components/HelloWorld')

Vue.use(Router)

  export default new Router({
         routes: [
                    {
                      path: '/',
                      name: 'HelloWorld',
                      component:HelloWorld
                    }
                  ]
                })

在 页面 需要使用通用组件 也可以 使用懒加载，自定义api.js等 需要考虑到加载优先级

2、关闭 vue-cli3预加载

找到 项目 -> config -> index.js -> module.exports :

    // 关闭 vue-cli3预加载
    chainWebpack: config => {
      // 移除 prefetch 插件
      config.plugins.delete('prefetch')
  
      // 或者
      // 修改它的选项：
      config.plugin('prefetch').tap(options => {
        options[0].fileBlacklist = options[0].fileBlacklist || []
        options[0].fileBlacklist.push(/myasyncRoute(.)+?\.js$/)
        return options
      })
    },

3、去除.map 线上调试代码

同样是 找到 项目 -> config -> index.js -> module.exports :

productionSourceMap: false

4、开启gzip压缩

第一步: 安装 依赖: 使用compression-webpack-plugin低版本 避免 冲突

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

第二步: 找到 项目 -> config -> index.js -> module.exports : 开启 gzip

productionGzip: true

第三步: 找到 项目 -> build-> webpack.prod.conf.js -> 找到 最底下: 找到 asset 修改为 filename

if (config.build.productionGzip) {
  const CompressionWebpackPlugin = require('compression-webpack-plugin')

  webpackConfig.plugins.push(
    new CompressionWebpackPlugin({
      filename: '[path].gz[query]',
      algorithm: 'gzip',
      test: new RegExp(
        '\\.(' +
        config.build.productionGzipExtensions.join('|') +
        ')$'
      ),
      threshold: 10240,
      minRatio: 0.8
    })
  )
}

第四步: 在部署的服务器上开启 gzip
nginx: nginx安装目录 -> conf -> nginx.conf.js

http { 
   gzip  on;
   gzip_min_length  1k;
   gzip_buffers     4 16k;
   gzip_http_version 1.1;
   gzip_comp_level 6;
   gzip_types       text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php application/javascript application/json;
   gzip_disable "MSIE [1-6]\.";
   gzip_vary on;

Tomcat: Tomcat安装目录 -> conf -> server.xml

<Connector port="80" protocol="HTTP/1.1"
               connectionTimeout="20000"
               redirectPort="8443" 
   	           compression="on"   
               compressionMinSize="50" noCompressionUserAgents="gozilla, traviata"   
               compressableMimeType="text/html,text/xml,text/javascript,text/css,text/plain,application/javascript"/>

注释:

1、compression="on"           开启压缩功能   
2、compressionMinSize="50"   启用压缩的输出内容大小，这里面默认为2KB
3、noCompressionUserAgents="gozilla, traviata"   对于以下的浏览器，不启用压缩

4、compressableMimeType="text/html,text/xml,text/css,text/plain,application/javascript"  压缩的资源类型,这里有其他项压缩的可以用浏览器看,就是资源的ContentType