vuecli4 首屏优化

优化方案

1.开启gzip
2.webpack配置externals三方库(vue、vuex、axios、moment等)
3.移除prefetch
4.修改router.js(相同路由地址报错)
5.cdn/oss静态(图片等)资源

环境vuecli4+nginx

开启gzip

①webpack打包gzip配置 vue.config.js

 configureWebpack: {
    plugins: [
      new CompressionPlugin({ // 开启gzip压缩
        test: /\.js$|\.html$|.\css/, //匹配文件名
        threshold: 10240,//对超过10k的数据压缩
        deleteOriginalAssets: false //不删除源文件
      }),
    ],
  },

②web服务器开启gzip nginx.conf

  # 开启gzip
	gzip on;
	# 匹配压缩类型 js/css
	gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript;

webpack配置externals三方库

①webpack配置 vue.config.js

  configureWebpack: {
    // 引用外部库
    externals: {
      'vue': 'Vue',
      'vue-router': 'VueRouter',
      'vuex': 'Vuex',
      'axios': 'axios',
      'moment': 'moment',
      'v-viewer': 'VueViewer',
    },
  },

②页面中引用cdn资源 index.html

  <script src="https://cdn/lib/vue.min.js"></script>
    <script src="https://cdn/lib/vuex.min.js"></script>
    <script src="https://cdn/lib/vue-router.min.js"></script>
    <script src="https://cdn/lib/axios.min.js"></script>
    <script src="https://cdn/lib/moment.min.js"></script>
    <script src="https://cdn/lib/moment-with-locales.min.js"></script>
    <link href="https://cdn/lib/v-viewer/viewer.min.css" rel="stylesheet">
    <script src="https://cdn/lib/v-viewer/viewer.min.js"></script>
    <script src="https://cdn/lib/v-viewer/v-viewer.min.js"></script>

移除prefetch

prefetch在chorme内核浏览器中,存在抢占主干资源带宽情况 vue.config.js

  chainWebpack: config => {
    // 移除 prefetch 插件
    config.plugins.delete('prefetch')
  },

修改router.js

// 解决两次访问相同路由地址报错
const originalPush = Router.prototype.push;
Router.prototype.push = function push(location) {
  return originalPush.call(this, location);
}

cdn/oss静态(图片等)资源

将项目中使用到的静态资源全部放在cdn/oss上,修改项目引用资源的路径为远程地址

Table of Contents