18720358503 在线客服 人才招聘 返回顶部
企业动态 技术分享 行业动态

微信怎么制作小程序_浅谈VUE单页应用首屏加载速

2021-01-08分享 "> 对不起,没有下一图集了!">
浅谈VUE单页应用首屏加载速度优化方案       这篇文章主要介绍了浅谈VUE单页应用首屏加载速度优化方案,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

单页应用会随着项目越大,导致首屏加载速度很慢!!!以下给出在下知道的几种优化方案

使用CDN资源,减小服务器带宽压力 路由懒加载 将一些静态js css放到其他地方(如OSS),减小服务器压力 按需加载三方资源,如iview,建议按需引入iview中的组件 使用nginx开启gzip减小网络传输的流量大小 webpack开启gzip压缩 若首屏为登录页,可以做成多入口,登录页单独分离为一个入口

使用CDN资源,减小服务器带宽压力

<中引入cdn资源

 body 
 div id="app" 
 /div 
 !-- built files will be auto injected -- 
 script src="vue/2.5.2/vue.min.js" /script 
 script src="vue-router/3.0.1/vue-router.min.js" /script 
 script src="vuex/3.0.1/vuex.min.js" /script 
 script src="vue-resource/1.5.1/vue-resource.min.js" /script 
 /body 

修改 build/webpack.base.conf.js

module.exports = {
 context: path.resolve(__dirname, '../'),
 entry: {
 app: './src/main.js'
 externals:{
 'vue': 'Vue',
 'vue-router': 'VueRouter',
 'vuex':'Vuex',
 'vue-resource': 'VueResource'

修改src/main.js src/router/index.js 注释掉import引入的vue,vue-resource

// import Vue from 'vue'
// import VueResource from 'vue-resource'
// Vue.use(VueResource)

路由懒加载

const workCircle = r = require.ensure([], () = r(require('@/module/work-circle/Index')), 'workCircle')
const workCircleList = r = require.ensure([], () = r(require('@/module/work-circle/page/List')), 'workCircleList')

将一些静态js css放到其他地方(如OSS),减小服务器压力

注意这里的js文件,需要将结果抛出,然后在需要用到该js的组件中import引入

按需加载三方资源,如iview,建议按需引入iview中的组件

按需引用请查看iview官方文档

使用nginx开启gzip减小网络传输的流量大小

配置nginx,可以参考

webpack开启gzip压缩

这里需要配合Nginx服务器,Nginx开启gzip

config/index.js中

module.exports = {
 build: {
 // Gzip off by default as many popular static hosts such as
 // Surge or Netlify already gzip all static assets for you.
 // Before setting to `true`, make sure to:
 // npm install --pression-webpack-plugin
 productionGzip: true, // 就是这里开启gzip,vue-cli搭建项目,这里默认为false
 productionGzipExtensions: ['js', 'css'],
 // Run mand with an extra argument to
 // View the bundle analyzer report after build finishes:
 // `npm run build --report`
 // Set to `true` or `false` to always turn it on or off
 bundleAnalyzerReport: process.env.npm_config_report
}

build/webpack.prod.conf.js中

使用vue-cli构建项目时,默认会有这段代码

if (config.build.productionGzip) {
 const CompressionWebpackPlugin = require('compression-webpack-plugin')
 webpackConfig.plugins.push(
 new CompressionWebpackPlugin({
 asset: '[path].gz[query]',
 algorithm: 'gzip',
 test: new RegExp(
 '\\.(' +
 config.build.productionGzipExtensions.join('|') +
 ')$'
 threshold: 10240,
 minRatio: 0.8

若首屏为登录页,可以做成多入口,登录页单独分离为一个入口

修改webpack配置

在原先只有一个入口叫app的基础上,再加一个叫login的入口,指向另一个入口js文件;

既然是两个页面,那么原先只有一个的HtmlWebpackPlugin也需要再添加一个,并且filename和template改成登录页的;

HtmlWebpackPlugin默认会把所有资源放进html,为了去掉不需要的资源,需要在HtmlWebpackPlugin选项里分别添加excludeChunks: ['login']和excludeChunks: ['app'];

原先的某些CommonsChunkPlugin会导致报错,删掉只剩下一个manifest的CommonsChunkPlugin就好。

添加登录相关文件

添加之前配好的login入口文件,与app类似,但是去掉登录页不需要的东西,如用不到的组件和样式等;

添加login入口专用的router配置文件,去掉其他路由,只留下登录页一个就好:

只留登录路由

添加登录页的html模板,也是去掉登录里用不到的资源。

修改其他细节

登录完不是用vue-router的push方法,而是改成直接修改location.href跳到另一个页面;

去除原来app路由中的login;

登录页中可以使用隐藏的iframe等方式预加载app页面中的数据(猜想)。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。


"> 对不起,没有下一图集了!">
在线咨询