• 售前

  • 售后

热门帖子
入门百科

vue2.x 从vue.config.js配置到项目优化

[复制链接]
娣玲 显示全部楼层 发表于 2021-10-26 13:53:09 |阅读模式 打印 上一主题 下一主题
目次


  • 前言
  • vue.config.js设置选项
  • 打包优化,减小包的巨细

    • 图片视频压缩
    • js代码压缩
    • cdn加速

  • 首屏加载时间优化

    • 路由懒加载优化
    • gzip压缩优化

  • 参考文献
vue.config.js 是一个可选的设置文件,如果项目标 (和 package.json 同级的) 根目次中存在这个文件,那么它会被 @vue/cli-service 自动加载。你也可以利用 package.json 中的 vue 字段,但是注意这种写法必要你严格依照 JSON 的格式来写。

前言

在实际项目中优化也是常常必要做的事情,特别在中大型项目中降低打包体积巨细,提高首屏加载时间是必不可少的,同时在面试中也是一个高频问题。本片文章我将从vue.config.js设置到项目优化前后结果做一个先容。
重要实用于Vue前端的优化,通过CDN,路由懒加载,图片压缩,GIZP压缩以后,到达降低摆设到服务器上的前端项目标包体积巨细,由于包体积巨细直接影响了项目初次打开的速率,而且前端文件体积变小,也意味着 CSS文件和JS文件也变小了,下载速率会更快,同理网页加载速率也就会变得更快,终极打到优化前端项目标目标

vue.config.js设置选项

该文件应该导出一个包罗了选项的对象



设置选项
这边说几个常用的设置:
       
  • pages: 设置应用的入口文件地址   
  • outputDir: 天生的生产情况构建文件的目次   
  • configureWebpack: 简朴的打包设置,由于脚手架内置了webpack,所以在不修改打包下令的情况在,在这里个性化设置打包参数,可以为一个对象大概箭头函数,注意: 这两种情势同时存在的话,后者会覆盖前者,所以只能用里矫饰的一种。   
  • chainWebpack: 链式利用的webpack设置,是一个函数   
  • devServer: 署理设置、服务端口设置,不设置的话默认端口:8080
具体设置说明可以到官网查看。

打包优化,减小包的巨细

正常打包都有默认的设置,在不修改的情况下也可以打包乐成,但是包会比力大。
通过vue脚手架自带的分析工具看下优化前的情况,在下令行输入:
  1. vue ui
复制代码
这是我自己项目前端部门的包分析



图片视频压缩

看可以看到有三个图片视频文件可以优化,其中mp4为了保持分辨率不好压缩临时忽略。
在线图片压缩网站压缩下图片,压缩率还不错



编译时还可以利用依靠再次压缩:image-webpack-loader
  1. ...
  2. chainWebpack: config => {
  3.     // 压缩图片
  4.     config.module
  5.     .rule('images')
  6.     .use('image-webpack-loader')
  7.     .loader('image-webpack-loader')
  8.     .options({
  9.       //{ bypassOnDebug: true }
  10.       mozjpeg: { progressive: true, quality: 65 }, // Compress JPEG images
  11.       optipng: { enabled: false }, // Compress PNG images
  12.       pngquant: { quality: [0.65, 0.9], speed: 4 }, // Compress PNG images
  13.       gifsicle: { interlaced: false } // Compress GIF images
  14.       // webp: { quality: 75 } // Compress SVG images
  15.     })
  16.     .end()
  17. }
  18. ...
复制代码
js代码压缩

代码压缩必要用到依靠:uglifyjs-webpack-plugin
  1. cnpm i -D muglifyjs-webpack-plugin
复制代码
由于打包时本来就会对空格举行处理,所以我们利用这个插件的目标时删除生产情况中的console息争释
注意: 由于利用这个插件会导致编译时间变长,所以建议在生产情况利用。
  1. ...
  2. configureWebpack: {
  3. ...
  4.         process.env.NODE_ENV === 'production'
  5.       ?new UglifyJsPlugin({
  6.           uglifyOptions: {
  7.             output: {
  8.               // 删除注释
  9.               comments: false
  10.             },
  11.             compress: {
  12.               drop_console: true,
  13.               drop_console: true //清除console语句
  14.               // pure_funcs: ['console.log'] // 自定义去除函数
  15.             }
  16.           },
  17.           sourceMap: false
  18.         })
  19.       : () => {}         ...
  20. }
  21. ,,,
复制代码
cdn加速

正常的webpack打包会天生chunk-vendors.js文件,它是捆绑全部不是自己的模块,而是来自其他方的模块的捆绑包。它们称为第三方模块或供应商模块。也就是来自项目/node_modules目次的全部模块。所以当依靠模块越来越多,模块越来越大时chunk-vendors.js就会越来越大
如果我们自己制作的网站必要挂在到服务器上供其他人利用,要怎样才能让你的用户在访问你的网址时更加速速呢?
有两种方法:
       
  • 让你的文档尽大概地小或少,这样整个传输速率就会有所提拔。   
  • 尽大概让你的文档离终极用户地点的位置近一些,这样整个传输路径就会大大减短。
公有云厂商在全世界各地都遍布不可胜数都数据中心和服务器,CDN服务简朴来讲就是这些厂商将你的服务器上面的文档分发到他们差别地区的服务器的当中。
每个地区可以称为一个节点,这样用户在访问你的网址时,浏览器发送的哀求就会优先绕去离客户近来的节点来获取数据,这样方便客户更快的速率访问网站。
CDN的全称是 Content Delivery Network,即内容分发网络,CDN是构建在现有网络底子之上的智能假造网络,依靠摆设在各地的边沿服务器,通过中心平台的负载均衡、内容分发、调治等功能模块,利用户就近获取所需内容,降低网络拥塞,提高用户访问响应速率和掷中率。CDN的关键技能重要有内容存储和分发技能——来自引用。
引入CDN
引入CDN提供的第三方库的地址,这边我引用了几个重要且较大的依靠:
  1. vue vuex elemenet-ui vue-router echarts axios
复制代码
  1. <!-- public/index.html -->
  2. <script src="https://cdn.bootcss.com/vue/2.6.11/vue.min.js"></script>
  3. <script src="https://cdn.bootcss.com/vue-router/3.0.2/vue-router.min.js"></script>
  4. <script src="https://cdn.bootcss.com/vuex/3.5.1/vuex.min.js"></script>
  5. <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.1/axios.min.js"></script>
  6. <link rel="stylesheet" href="https://unpkg.com/element-ui@2.13.2/lib/theme-chalk/index.css" rel="external nofollow" >
  7. <script src="https://cdn.bootcss.com/element-ui/2.13.2/index.js"></script>
  8. <script src="https://unpkg.com/element-ui@2.13.2/lib/index.js"></script>
  9. <script src="https://cdn.bootcss.com/echarts/5.0.2/echarts.min.js"></script>
复制代码
添加引入的库
在 vue.config.js中添加必要从CDN引用的依靠库
  1. ...
  2. configureWebpack: {
  3. ...
  4.         externals: {
  5.           // 指定需要挂载的第三方库 格式:  第三方库名 :'库在项目中的别名'
  6.           // 注意element-ui别名只能用ELEMENT,改了会出现undefined的保存
  7.           vue: 'Vue',
  8.       vuex: 'Vuex',
  9.       'vue-router': 'VueRouter',
  10.       axios: 'axios',
  11.       echarts: 'echarts',
  12.       'element-ui': 'ELEMENT'
  13.         },
  14. ...
  15. }
  16. ...
复制代码
表明项目中用到依靠的地方
提示: 如果项目较大,必要表明的地方很多,我建议先把引入cdn的库的package.json里删除,然后运行项目,肯定会提示模块缺失,哪里提示哪里表明,不会有遗漏。


大概出现的报错
element-ui的别名只能设置为‘ELEMENT',在按需引入时,利用ELEMENT.Message…error(…),我试过修改未其他,但是这样会报xxx is undefined
大文件文件定位对比
对比下cdn前后大文件分布

cdn加速前:


cdn加速后:



文件减小很多,大依靠根本没有

成果


对比下,前后结果很是很明显的


首屏加载时间优化

上面这个过程其实已经是在优化首屏加载的时间了,是不外首屏加载时间还可以再举行优化
在只举行了上面的打包优化时,首屏时间比力:
优化前加载时间1.92秒,优化后1.26秒,加载的资源也减小不少,总之提拔明显。



由于利用了cdn,所以requset的数量有所增长


路由懒加载优化

界说
懒加载简朴来说就是延伸加载路由或按需加载路由,即在必要的时候的时候举行加载,不必要就先不举行加载,这样可以加速项目网页的加载速率。
常用实现方法
1、vue异步组件实现路由懒加载
  1. component:resolve=>(['需要加载的路由的地址',resolve])
复制代码
2、es提出的import(推荐利用这种方式)
  1. // 下面2行代码,没有指定webpackChunkName,每个组件打包成一个js文件。
  2. const Index = () => import('@/components/index')
  3. const About = () => import('@/components/about') */
  4. // 下面3行代码,指定了相同的webpackChunkName,会合并打包成一个js文件。 把组件按组分块
  5. const Home =  () => import(/* webpackChunkName: 'visualization' */ '@/components/home')
  6. const Index = () => import(/* webpackChunkName: 'visualization' */ '@/components/index')
  7. const About = () => import(/* webpackChunkName: 'visualization' */ '@/components/about')
复制代码
以我项目标打包为例,不指定webpackChunkName打包出来js文件夹有17个文件


指定两个页面路由为相同的webpackChunkName后打包出来未文件夹只有16个



缘故原由就是相同的webpackChunkName会合并打包为一个js文件

gzip压缩优化

简朴说gzip就是在打包后再对文件举行一边压缩,让文件更小,传输更快,结果就是你点击网址后会很快的表现出相关内容
但不是每个浏览器都支持gzip的,如果知道客户端是否支持gzip呢,哀求头中有个Accept-Encoding来标识对压缩的支持。客户端http哀求头声明浏览器支持的压缩方式,服务端设置启用压缩,压缩的文件范例,压缩方式。当客户端哀求到服务端的时候,服务器剖析哀求头,如果客户端支持gzip压缩,响应时对哀求的资源举行压缩并返回给客户端,浏览器按照自己的方式剖析,在http响应头,我们可以看到content-encoding:gzip,这是指服务端利用了gzip的压缩方式。


前端开启GZIP
这里必要用到一个插件:compression-webpack-plugin
  1. npm install compression-webpack-plugin
复制代码
在 vue.config.js中举行设置
  1. configureWebpack: {
  2. ...
  3. new CompressionPlugin({
  4.    filename: '[path].gz[query]',
  5.    algorithm: 'gzip',
  6.    test: /\.js$|\.html$|\.css/,
  7.    threshold: 10240, // 只有大小大于该值的资源会被处理 10240
  8.    minRatio: 0.8, // 只有压缩率小于这个值的资源才会被处理
  9.    // 删除原文件
  10.    // 如果开发环境要用就设置未false,不然编辑以后页面打不开
  11.    // 如果就生产环境用可以设置为true,这样打包后的体积更小
  12.    deleteOriginalAssets: false
  13. }),
  14. ...
  15. }
  16. ,,,
  17. // gzip压缩
复制代码
在服务器的 nginx中 开启GZIP压缩

查看是否乐成开启GZIP压缩


参考文献

Vue项目优化文档
vue.config.js打包优化
前端性能优化之gzip
到此这篇关于vue2.x 从vue.config.js设置到项目优化的文章就先容到这了,更多相关vue 项目优化内容请搜索草根技术分享以前的文章或继续浏览下面的相关文章希望各人以后多多支持草根技术分享!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作