Print

vue项目如何部署实践篇

作者： 文章来源：

本文原地址：https://www.mimiwuqi.com/webqianduan/197474.html

目录文章目录
  1. 前端页面文件缓存方案
  2. 前端文件设置gzip压缩
  3. 总结

使用vue、react、angular等技术开发过程中，我们都会遇到以下问题：

  1. 首屏加载慢
  2. 每一次更新都需要清除浏览器缓存才能看到效果(经常被测试吐槽)

这两个问题可以从很多方面进行优化，今天我就从前端页面部署阶段来优化一下这两个问题。PS：以下内容都基于vue-cli3+。

前端页面文件缓存方案

从vue-cli3打包说起

路由使用按需加载后，打包生成的文件，每一个路由页面都对应一个js和css文件，入口main.js及其依赖则打包成了app.js和app.css，公共依赖都放到了chunk-vendors.js。

vue-cli3打包后的dist/js文件夹：

vue项目如何部署实践篇 1

  • 在 Nginx 的目录下使用 cmd 命令行，启动命令：start nginx，关闭命令：nginx -s stop

    • 备注：修改配置文件需要重载配置：nginx -s reload。启动之后，打开http://localhost:80就能看的效果

    总结

    页面文件合理的设置缓存和gzip压缩是实实在在能提升用户体验的操作，而且比少写几个循环、删除几行代码优化强得多，但是需要前端和运维的密切配合，才能实现最佳方案。

    service worker是用来实现离线应用的，文章中没有详细赘述。vue-cli4生成的模板自带service worker，或许这才是vue项目缓存的最佳实践？

    最后，Nginx并不是很熟悉，有什么问题和错误，欢迎指出！

    文章转载自：公众号【前端 Q】

    更多 建站教程 请访问 https://www.mimiwuqi.com/webqianduan/