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上,修改项目引用资源的路径为远程地址