vue中如何优化单页应用首屏加载速度（详细）
本篇文章给大家带来的内容是关于vue中如何优化单页应用首屏加载速度（详细） ，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
单页应用会随着项目越大，导致首屏加载速度很慢！！！以下给出在下知道的几种优化方案
使用CDN资源,减小服务器带宽压力
路由懒加载
将一些静态js css放到其他地方（如OSS），减小服务器压力
按需加载三方资源，如iview,建议按需引入iview中的组件
使用nginx开启gzip减小网络传输的流量大小
webpack开启gzip压缩
若首屏为登录页，可以做成多入口，登录页单独分离为一个入口
使用CDN资源,减小服务器带宽压力
在index.html中引入cdn资源
...
<body>
<p id="app">
</p>
<!-- built files will be auto injected -->
<script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
<script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script>
<script src="https://cdn.bootcss.com/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官方文档iview
使用nginx开启gzip减小网络传输的流量大小
配置nginx，可以参考Nginx开启Gzip压缩大幅提高页面加载速度
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 --save-dev compression-webpack-plugin
productionGzip: true, // 就是这里开启gzip,vue-cli搭建项目，这里默认为false
productionGzipExtensions: ['js', 'css'],
// Run the build command 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
})
)
}若首屏为登录页，可以做成多入口，登录页单独分离为一个入口
相关推荐：
以上是vue中如何优化单页应用首屏加载速度（详细）的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
nginx在windows中怎么配置
Apr 14, 2025 pm 12:57 PM
如何在 Windows 中配置 Nginx？安装 Nginx 并创建虚拟主机配置。修改主配置文件并包含虚拟主机配置。启动或重新加载 Nginx。测试配置并查看网站。选择性启用 SSL 并配置 SSL 证书。选择性设置防火墙允许 80 和 443 端口流量。
docker怎么启动容器
Apr 15, 2025 pm 12:27 PM
Docker 容器启动步骤：拉取容器镜像：运行 "docker pull [镜像名称]"。创建容器：使用 "docker create [选项] [镜像名称] [命令和参数]"。启动容器：执行 "docker start [容器名称或 ID]"。检查容器状态：通过 "docker ps" 验证容器是否正在运行。
docker容器名称怎么查
Apr 15, 2025 pm 12:21 PM
可以通过以下步骤查询 Docker 容器名称：列出所有容器（docker ps）。筛选容器列表（使用 grep 命令）。获取容器名称（位于 "NAMES" 列中）。
怎么查看nginx是否启动
Apr 14, 2025 pm 01:03 PM
确认 Nginx 是否启动的方法：1. 使用命令行：systemctl status nginx（Linux/Unix）、netstat -ano | findstr 80（Windows）；2. 检查端口 80 是否开放；3. 查看系统日志中 Nginx 启动消息；4. 使用第三方工具，如 Nagios、Zabbix、Icinga。
docker怎么创建容器
Apr 15, 2025 pm 12:18 PM
在 Docker 中创建容器： 1. 拉取镜像： docker pull [镜像名] 2. 创建容器： docker run [选项] [镜像名] [命令] 3. 启动容器： docker start [容器名]
nginx怎么查版本
Apr 14, 2025 am 11:57 AM
可以查询 Nginx 版本的方法有：使用 nginx -v 命令；查看 nginx.conf 文件中的 version 指令；打开 Nginx 错误页，查看页面的标题。
nginx怎么配置云服务器域名
Apr 14, 2025 pm 12:18 PM
在云服务器上配置 Nginx 域名的方法：创建 A 记录，指向云服务器的公共 IP 地址。在 Nginx 配置文件中添加虚拟主机块，指定侦听端口、域名和网站根目录。重启 Nginx 以应用更改。访问域名测试配置。其他注意事项：安装 SSL 证书启用 HTTPS、确保防火墙允许 80 端口流量、等待 DNS 解析生效。
nginx服务器挂了怎么办
Apr 14, 2025 am 11:42 AM
当 Nginx 服务器宕机时，可执行以下故障排除步骤：检查 nginx 进程是否正在运行。查看错误日志以获取错误消息。检查 nginx 配置语法正确性。确保 nginx 具有访问文件所需的权限。检查文件描述符打开限制。确认 nginx 正在侦听正确的端口。添加防火墙规则以允许nginx流量。检查反向代理设置，包括后端服务器可用性。如需进一步帮助，请联系技术支持。
