vueconfigjs配置简书,vue中config的配置详解

　　本文主要介绍vue2.x从vue.config.js到项目优化的配置。通过示例代码进行了非常详细的介绍，对大家的学习或工作有一定的参考价值。如果你需要，让我们和边肖一起学习吧。

目录

　　前言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：简单包装配置。因为scaffold内置了webpack，不需要修改打包命令，可以在这里个性化配置打包参数，可以是对象，也可以是箭头函数。如果注意：两种形态同时存在，后者会覆盖前者，所以你只能用其中的一种来炫耀。

　　chainWebpack：webpack配置的连锁操作，这是一个功能

　　devServer：代理配置和服务端口设置，如果没有设置，默认端口是8080。

　　详细配置说明可在官网查看。

打包优化，减小包的大小

　　正常打包有默认配置，不需要修改也能成功打包，但是包会更大。

　　通过vue scaffold提供的分析工具查看优化前的情况，输入：

　　vue用户界面

　　这是我自己项目前端部分的包分析。

图片视频压缩

　　可以看到，有三个图片视频文件可以优化，其中mp4为了保持较差的分辨率，暂时忽略。

　　图像压缩网站在线压缩图像，压缩率还不错。

　　编译时也可以使用依赖再压缩：image-webpack-loader。

　　.

　　chainWebpack: config={

　　//压缩图片

　　配置模块。规则(“图像”)。使用( image-webpack-loader )。加载器(“image-webpack-loader”)。选项({

　　//{ bypassOnDebug: true }

　　mozjpeg: { progressive: true，quality: 65 }，//压缩jpeg图像

　　optipng: { enabled: false }，//压缩png图像

　　pngquant: {质量：[0.65，0.9]，速度：4 }，//压缩PNG图像

　　gifsicle: { interlaced: false } //压缩GIF图像

　　//webp: { quality: 75 } //压缩SVG图像

　　})。结束()

　　}

　　.

js代码压缩

　　代码压缩需要依赖关系：uglifyjs-webpack-plugin

　　cnpm I-D muglifyjs-web pack-plugin

　　由于空间将在打包期间被处理，所以使用该插件的目的是删除生产环境中的控制台和注释注意：。由于使用这个插件会导致编译时间变长，所以建议在生产环境中使用它。

　　.

　　configureWebpack: {

　　.

　　process.env.NODE_ENV===生产

　　？新的UglifyJsPlugin({

　　丑陋选项：{

　　输出：{

　　//删除注释

　　评论：错误

　　},

　　压缩：{

　　drop_console:真的，

　　Drop_console: true //清除控制台语句

　　//pure_funcs: [console.log] //自定义移除函数

　　}

　　},

　　源地图：假

　　})

　　: ()={} .

　　}

　　,

cdn加速

　　正常的webpack打包会生成chunk-vendors.js文件，这是一个捆绑包，绑定了所有不是自己的模块，而是其他方的模块。它们被称为第三方模块或供应商模块。即project /node_modules目录中的所有模块。所以当依赖的模块越来越多，模块越来越大的时候，chunk-vendors.js也会越来越大。

　　如果我们自己的网站需要挂在服务器上给别人用，怎么才能让你的用户更快的访问你的网站？

　　有两种方法：

　　把你的文件做的越小越好，或者越少越好，这样整个传输速度会提高。

　　让你的文档尽可能靠近最终用户的位置，这样整个传输路径会大大缩短。

　　公有云厂商遍布全球无数的数据中心和服务器。简单来说，CDN服务就是这些厂商把你服务器上的文档分发到他们不同地区的服务器上。

　　每个区域可以称为一个节点，这样当用户访问你的网站时，浏览器发出的请求会优先绕过离客户最近的节点获取数据，从而方便客户更快地访问网站。

　　CDN的全称是Content Delivery Network，即内容分发网络。CDN是基于现有网络的智能虚拟网络。它依托部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，使用户能够就近获取所需内容，减少网络拥塞，提高用户的响应速度和命中率。CDN的关键技术主要有内容存储和分发技术3354，引用自。

　　引入CDN

　　介绍CDN提供的第三方库的地址，这里我举了几个重要且大的依赖：vue vuex elemenet-ui vue-router e charts axios。

　　！- public/index.html -

　　script src= https://cdn . bootcss . com/vue/2 . 6 . 11/vue . min . js /script

　　script src= https://cdn . bootcss . com/vue-router/3 . 0 . 2/vue-router . min . js /script

　　script src= https://cdn . bootcss . com/vuex/3 . 5 . 1/vuex . min . js /script

　　script src= https://cdnjs . cloud flare . com/Ajax/libs/axios/0 . 21 . 1/axios . min . js /script

　　link rel= style sheet href= https://un pkg . com/element-ui @ 2 . 13 . 2/lib/theme-chalk/index . CSS rel= external no follow

　　script src= https://cdn . bootcss . com/element-ui/2 . 13 . 2/index . js /script

　　script src= https://UNP kg . com/element-ui @ 2 . 13 . 2/lib/index . js /script

　　script src= https://cdn . bootcss . com/echarts/5 . 0 . 2/echarts . min . js /script

　　添加引入的库

　　在vue.config.js中添加需要从CDN引用的依赖库

　　.

　　configureWebpack: {

　　.

　　外部：{

　　//指定要挂载的第三方库的格式：第三方库名称：“项目中库的别名”

　　//注意ELEMENT-ui的别名只能使用ELEMENT。如果它被改变，它将保存未定义的。

　　Vue:“Vue”，

　　Vuex:“Vuex”，

　　“vue路由器”:“vue路由器”，

　　axios:“axios”，

　　埃查尔兹：“埃查尔兹”，

　　元素-用户界面“:”元素

　　},

　　.

　　}

　　.

　　注释项目中用到依赖的地方

　　提示：如果项目大，需要评论的地方很多。我建议先删除引入cdn的库的package.json，然后再运行项目。肯定会提示模块缺失，提示注释的地方不会有遗漏。

　　可能出现的报错

　　element-ui的别名只能设置为“element”。当按需引入时，元素。使用了消息…错误(…)。我已经尝试修改其他任何东西，但这将报告xxx是未定义的。

　　大文件文件定位对比

　　比较cdn前后大文件的分布

　　cdn加速前：

　　cdn加速后：

　　档案减少很多，基本没有大的依赖。

　　成果

　　相比之下，前后效果非常明显。

首屏加载时间优化

　　上面的过程其实是在优化首屏加载时间，但是首屏加载时间是可以优化的。

　　在只进行了上面的打包优化时，首屏时间比较：

　　优化前加载时间1.92秒，优化后1.26秒，加载的资源也减少了不少，总之提升很明显。

　　由于使用了cdn，请求的数量增加了。

路由懒加载优化

　　定义

　　简单来说，懒加载就是延迟加载路线或者按需加载路线，即需要时加载，不需要时不加载，可以加快项目网页的加载速度。

　　常用实现方法

　　1.vue异步组件实现路由的惰性加载。

　　Component: resolve=([要加载的路由的地址，resolve])

　　2.es建议的导入(建议使用此方法)

　　//下面2行代码没有指定webpackChunkName，每个组件打包成一个js文件。

　　const Index=()=import( @/components/Index )

　　const About=()=import( @/components/About )*/

　　//下面3行代码，指定了相同的webpackChunkName，将组合打包成一个js文件。将组件放入块中。

　　const Home=()=import(/* webpackChunkName: visualization */ @/components/Home )

　　const Index=()=import(/* webpackChunkName: visualization */ @/components/Index )

　　const About=()=import(/* webpackChunkName: visualization */ @/components/About )

　　以我项目的包装为例。js文件夹中有17个文件没有指定webpackChunkName。

　　在指定两个页面被路由到同一个webpackChunkName之后，它们被打包，只有16个文件夹。

　　原因是相同的webpackChunkName会被组合打包成一个js文件。

gzip压缩优化

　　简单来说，gzip就是在打包后对文件进行压缩，使得文件更小，传输更快。效果是你点击网址后会快速显示相关内容。

　　但并不是每个浏览器都支持gzip。如果您知道客户机是否支持gzip，那么在请求头中有一个Accept-Encoding来标识对压缩的支持。客户端的http请求头声明浏览器支持的压缩方式，服务器配置启用压缩的文件类型和压缩方式。当客户端向服务器请求时，服务器解析请求头。如果客户端支持gzip压缩，它会压缩请求的资源，并在响应时将它们返回给客户端。浏览器按照自己的方式解析它们。在http响应头中，我们可以看到content-encoding:gzip，这意味着服务器使用gzip压缩。

　　前端开启GZIP

　　这里需要一个插件：compression-webpack-plugin。

　　npm安装压缩-web pack-插件

　　在 vue.config.js中进行设置

　　configureWebpack: {

　　.

　　新压缩插件({

　　文件名：[路径]。gz[查询]，

　　算法： gzip ，

　　测试：/\。js$\。html$\。css/，

　　Threshold: 10240，//只有大小大于该值的资源才会被处理10240

　　MinRatio: 0.8，//只处理压缩比小于该值的资源。

　　//删除原始文件

　　//如果要使用开发环境，设置为not false，否则编辑后页面不会打开。

　　//如果在生产环境中使用，可以设置为true，这样打包的体积更小。

　　deleteOriginalAssets: false

　　}),

　　.

　　}

　　,

　　//gzip压缩

　　在服务器的nginx中打开GZIP压缩。

　　查看GZIP压缩是否成功打开。

参考文献

　　Vue项目优化文档

　　vue.config.js的打包优化

　　Gzip用于前端性能优化

　　关于vue2.x的配置从vue.config.js到项目优化的这篇文章到此结束。更多相关vue项目优化内容，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。