重庆商业网站有哪些,企业网站建设存在的不足与困难,合肥哪个公司是网络推广,网站制作内容文案最近使用vue-cli3构建了一个小型的博客系统#xff0c;完工之后#xff0c;build打包出来发现一个chunk-vendors包就有1.1m#xff0c;部署上去之后#xff0c;访问的时候#xff0c;首屏加载非常慢。居然需要21s#xff0c;体验极差。这是打包的结果截图根据这种情况完工之后build打包出来发现一个chunk-vendors包就有1.1m部署上去之后访问的时候首屏加载非常慢。居然需要21s体验极差。这是打包的结果截图根据这种情况进行了一下优化一、路由懒加载 结合Vue的异步组件再结合webpack的代码分割我们可以轻松的实现路由懒加载。路由懒加载的实现有几种方法这里我就使用了 resolve。 这一种方法较常见。它主要是使用了 resolve 的异步机制用 require 代替了import,实现按需加载。如下修改router./index.js文件之前 修改之后进行一次打包 npm run build发现打包的结果有了变化对比一下开始时候的的chunk-vendors体积减小了大概700k但是还是太大了。需要继续优化。二、服务器开启Gzip Gzip是GNU zip的缩写是一种压缩技术。它将浏览器请求的文件先在服务器端进行压缩然后传递给浏览器浏览器解压之后再进行页面的解析工作。在服务端开启Gzip支持后我们前端需要提供资源压缩包。 通过 CompressionWebpackPlugin插件进行打包的时候压缩安装插件 cnpm i --save compression-webpack-plugin 修改vue.config.js文件打包效果如图看到 Gzipped那一列发现Gzip已经把文件减少了2/3了。接下来就是需要开启一下服务端的Gzip修改nginx.conf配置文件(一般在 /etc/nginx/ngin.conf)找到该文件配置如下修改之后别忘了重启一下nginx 进入带nginx的安装目录下(一般在/usr/sbin),执行 ./nginx -s reload。到了这一步gzip基本已经优化完成。让我们来继续优化三 、去除console来减少文件大小 安装 uglifyjs-webpack-plugin cnpm install uglifyjs-webpack-plugin --save-dev配置vue.config.js:如果代码中有很多log优化就会很明显了。上面三种就是我使用的首屏加载优化的方法让我们放到服务器上面看下效果可以发现相比之前的首屏加载速度还是提升了不少的。小结以上就是我使用的三种首屏优化方式当然首屏优化方式还不止这些还可以用到的方法有静态资源、不常用改动的js库可以使用CDN加速ssr服务端渲染通过webpack配置避免组件重复打包从代码层面去减少代码量(提高代码复用率)等等方法需要以后去钻研一下。以上是关于vue首屏优化的全部内容希望对大家的学习有所帮助。
