您好，登录后才能下订单哦！
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
这篇文章主要讲解了“vue怎么解决首页加载慢的问题”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“vue怎么解决首页加载慢的问题”吧！
{
path: '/chinaWine',
name: 'chinaWine',
component: resolve => require(['./views/chinaWine'], resolve)
},此方法会把原本打包到一个app.js文件分开成多个js文件打包，这样会减小单个文件的大小，但是不会减小整个js文件夹的大小。
通过这种方式可以做到按需加载，只加载单个页面的js文件。
打包的app.js过大，另外还有一些生成的map文件。先将多余的map文件去掉，
找到config文件夹下index.js文件,把这个build里面的productionSourceMap改成false即可
在项目开发中，我们会用到很多第三方库，如果可以按需引入，我们可以只引入自己需要的组件，来减少所占空间，
但也会有一些不能按需引入，我们可以采用CDN外部加载，在index.html中从CDN引入组件，去掉其他页面的组件import，修改webpack.base.config.js，在externals中加入该组件，这是为了避免编译时找不到组件报错。
gizp压缩是一种http请求优化方式，通过减少文件体积来提高加载速度。
html、js、css文件甚至json数据都可以用它压缩，可以减小60%以上的体积。
const CompressionPlugin = require('compression-webpack-plugin')
configureWebpack: config => {
if (process.env.NODE_ENV === 'production') {
return {
plugins: [new CompressionPlugin({
test: /\.js$|\.html$|\.css/,
threshold: 10240,
deleteOriginalAssets: false
})]
}
}
}http {
gzip on;
gzip_min_length 1k;
gzip_buffers 4 8k;
gzip_http_version 1.0;
gzip_comp_level 8;
gzip_proxied any;
gzip_types application/javascript text/css image/gif;
gzip_vary on;
gzip_disable "MSIE [1-6]\.";
#以下的配置省略...
}nginx -s reload ：修改配置后重新加载生效
其实把上面的优化做完，优化到5秒以内没问题了，但是如果像我司前端页面100多个，比较大的项目，可能还是会有点慢。
上面我们做了那么多，都是基于js执行完以后进行的渲染，如果想要更快一点，还有两种方案，一种是ssr也就是服务端渲染，一种就是预渲染。
预渲染是在js加载前，就生成了一个首页的静态页面，用于加载，不会让你等着了，静态页面的性能不用说了吧，嗖嗖的。
预渲染依赖的是prerender-spa-plugin插件，使用起来也非常的简单,但是坑非常多，一个地方尊重不到就会报错：
建议使用淘宝镜像的cnpm，因为npm安装经常失败，血泪教训，倒腾了一上午
const path = require('path');
const PrerenderSPAPlugin = require('prerender-spa-plugin');
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;
在plugins下面，找到plugins对象，直接加到上面就行
// 预渲染配置
new PrerenderSPAPlugin({
//要求-给的WebPack-输出应用程序的路径预渲染。
staticDir: path.join(__dirname, 'dist'),
//必需，要渲染的路线。
routes: ['/login'],
//必须，要使用的实际渲染器，没有则不能预编译
renderer: new Renderer({
inject: {
foo: 'bar'
},
headless: false, //渲染时显示浏览器窗口。对调试很有用。
//等待渲染，直到检测到指定元素。
//例如，在项目入口使用`document.dispatchEvent(new Event('custom-render-trigger'))`
renderAfterDocumentEvent: 'render-event'
})
})需要把vue的router模式设置成history模式
在创建vue实例的mounted里面加一个事件，跟PrerenderSPAPlugin实例里面的renderAfterDocumentEvent对应上。
mounted () {
document.dispatchEvent(new Event('render-event'))
},这是预渲染的基本配置，npm run build 一下，如果dist文件夹多了你想预渲染的文件夹，那么恭喜你，成功了！如果项目是用nginx做的代理，nginx还需要做一些配置，具体是：
location = / {
try_files /home/index.html /index.html;
}
location / {
try_files $uri $uri/ /index.html;
}具体的根据自己需要欲渲染的路由自己配
感谢各位的阅读，以上就是“vue怎么解决首页加载慢的问题”的内容了，经过本文的学习后，相信大家对vue怎么解决首页加载慢的问题这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是亿速云，小编将为大家推送更多相关知识点的文章，欢迎关注！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。