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

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脚手架自带的分析工具看下优化前的情况,在命令行输入:

vue ui

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

图片视频压缩

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

编译时还可以使用依赖再次压缩:image-webpack-loader

...
chainWebpack: config => {
    // 压缩图片
    config.module
    .rule('images')
    .use('image-webpack-loader')
    .loader('image-webpack-loader')
    .options({
      //{ bypassOnDebug: true }
      mozjpeg: { progressive: true, quality: 65 }, // Compress JPEG images
      optipng: { enabled: false }, // Compress PNG images
      pngquant: { quality: [0.65, 0.9], speed: 4 }, // Compress PNG images
      gifsicle: { interlaced: false } // Compress GIF images
      // webp: { quality: 75 } // Compress SVG images
    })
    .end()
}
...

js代码压缩

代码压缩需要用到依赖:uglifyjs-webpack-plugin

cnpm i -D muglifyjs-webpack-plugin

由于打包时本来就会对空格进行处理,所以我们使用这个插件的目的时删除生产环境中的console和注释
注意: 由于使用这个插件会导致编译时间变长,所以建议在生产环境使用。

...
configureWebpack: {
...
	process.env.NODE_ENV === 'production'
      ?new UglifyJsPlugin({
          uglifyOptions: {
            output: {
              // 删除注释
              comments: false
            },
            compress: {
              drop_console: true,
              drop_console: true //清除console语句
              // pure_funcs: ['console.log'] // 自定义去除函数
            }
          },
          sourceMap: false
        })
      : () => {}	 ...
}
,,,

cdn加速

正常的webpack打包会生成chunk-vendors.js文件,它是捆绑所有不是自己的模块,而是来自其他方的模块的捆绑包。它们称为第三方模块或供应商模块。也就是来自项目/node_modules目录的所有模块。所以当依赖模块越来越多,模块越来越大时chunk-vendors.js就会越来越大

如果我们自己制作的网站需要挂在到服务器上供其他人使用,要怎样才能让你的用户在访问你的网址时更加快速呢?
有两种方法:

  • 让你的文档尽可能地小或少,这样整个传输速度就会有所提升。
  • 尽可能让你的文档离最终用户所在的位置近一些,这样整个传输路径就会大大减短。

公有云厂商在全世界各地都遍布不计其数都数据中心和服务器,CDN服务简单来讲就是这些厂商将你的服务器上面的文档分发到他们不同地区的服务器的当中。
每个地区可以称为一个节点,这样用户在访问你的网址时,浏览器发送的请求就会优先绕去离客户最近的节点来获取数据,这样方便客户更快的速度访问网站。
CDN的全称是 Content Delivery Network,即内容分发网络,CDN是构建在现有网络基础之上的智能虚拟网络,依靠部署在各地的边缘服务器,通过中心平台的负载均衡、内容分发、调度等功能模块,使用户就近获取所需内容,降低网络拥塞,提高用户访问响应速度和命中率。CDN的关键技术主要有内容存储和分发技术——来自引用

引入CDN

引入CDN提供的第三方库的地址,这边我引用了几个重要且较大的依赖:vue vuex elemenet-ui vue-router echarts 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.cloudflare.com/ajax/libs/axios/0.21.1/axios.min.js"></script>
 <link rel="stylesheet" href="https://unpkg.com/element-ui@2.13.2/lib/theme-chalk/index.css" rel="external nofollow" >
 <script src="https://cdn.bootcss.com/element-ui/2.13.2/index.js"></script>
 <script src="https://unpkg.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: {
...
	externals: {
	  // 指定需要挂载的第三方库 格式:  第三方库名 :'库在项目中的别名'
	  // 注意element-ui别名只能用ELEMENT,改了会出现undefined的保存
	  vue: 'Vue',
      vuex: 'Vuex',
      'vue-router': 'VueRouter',
      axios: 'axios',
      echarts: 'echarts',
      'element-ui': 'ELEMENT'
	},
...
}
...

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

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

可能出现的报错

element-ui的别名只能设置为‘ELEMENT',在按需引入时,使用ELEMENT.Message…error(…),我试过修改未其他,但是这样会报xxx is undefined

大文件文件定位对比

对比下cdn前后大文件分布

cdn加速前:

cdn加速后:

文件减小很多,大依赖基本没有

成果

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

首屏加载时间优化

上面这个过程其实已经是在优化首屏加载的时间了,是不过首屏加载时间还可以再进行优化

在只进行了上面的打包优化时,首屏时间比较:
优化前加载时间1.92秒,优化后1.26秒,加载的资源也减小不少,总之提升明显。

因为使用了cdn,所以requset的数量有所增加

路由懒加载优化

定义

懒加载简单来说就是延迟加载路由或按需加载路由,即在需要的时候的时候进行加载,不需要就先不进行加载,这样可以加快项目网页的加载速度。

常用实现方法

1、vue异步组件实现路由懒加载

component:resolve=>(['需要加载的路由的地址',resolve])

2、es提出的import(推荐使用这种方式)

// 下面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')

以我项目的打包为例,不指定webpackChunkName打包出来js文件夹有17个文件

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

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

gzip压缩优化

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

前端开启GZIP

这里需要用到一个插件:compression-webpack-plugin

npm install compression-webpack-plugin

在 vue.config.js中进行设置

configureWebpack: {
...
new CompressionPlugin({
   filename: '[path].gz[query]',
   algorithm: 'gzip',
   test: /\.js$|\.html$|\.css/,
   threshold: 10240, // 只有大小大于该值的资源会被处理 10240
   minRatio: 0.8, // 只有压缩率小于这个值的资源才会被处理
   // 删除原文件
   // 如果开发环境要用就设置未false,不然编辑以后页面打不开
   // 如果就生产环境用可以设置为true,这样打包后的体积更小
   deleteOriginalAssets: false
}),
...
}
,,,
// gzip压缩

在服务器的 nginx中 开启GZIP压缩

查看是否成功开启GZIP压缩

参考文献

Vue项目优化文档
vue.config.js打包优化
前端性能优化之gzip

到此这篇关于vue2.x 从vue.config.js配置到项目优化的文章就介绍到这了,更多相关vue 项目优化内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • vue项目优化之通过keep-alive数据缓存的方法

    <keep-alive>是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM. <keep-alive> 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们.和 <transition> 相似,<keep-alive> 是一个抽象组件:它自身不会渲染一个 DOM 元素,也不会出现在父组件链中. prop: include: 字符串或正则表达式.只有匹配的组件会被缓存. exclude: 字符串或正则表达式.任何匹配的组件都不会被缓

  • vue-cli项目优化方法- 缩短首屏加载时间

    最近实习的项目需求上要求不多,就学了下项目优化,主要是首屏加载太慢. 大文件定位 我们可以使用webpack可视化插件Webpack Bundle Analyzer 查看工程js文件大小,然后有目的的解决过大的js文件. 安装 npm install --save-dev webpack-bundle-analyzer 在webpack中设置如下,然后npm run dev 的时候默认会在8888端口显示. const BundleAnalyzerPlugin = require('webpac

  • 详解Vue SPA项目优化小记

    概述 之前做了一个React项目和Vue的项目,在做完后不加任何优化的情况下,这2个项目的首屏加载平均时间居然达到了20+s,好一点能进10s,差一点快30s,完全不能忍,优化势在必行,本文章记录下Vue项目的优化过程,React项目的优化后续补上. 上图是Vue项目的首页,整个项目由vue-cli搭建,主要分为4个模块,见页面左侧导航栏,总体代码量不算太大,组件的话总共50个左右吧,项目结构见下图,不算特别大的项目,但是首屏加载时间居然这么慢. 首先得确定到底是哪里导致了首屏渲染如此之慢?打开

  • Vue-Cli项目优化操作的实现

    起源 由Vue-Cli(2.X)生成的Vue项目中存在着首屏加载过慢,编译资源过大等问题,主要针对这些问题对项目进行相应的优化,提升项目响应速度,优化项目性能. 操作 路由懒加载 在Vue-router官方文档中有针对懒加载的介绍,主要是将整个大的js进行切片,对当前路由的资源进行一个按需加载.在Vue-cli生成的路由组件引用方法是这样的 import HelloWorld from '@/components/HelloWorld' 只需将组件的引用方式改为 const HelloWorld

  • vue-cli2.x项目优化之引入本地静态库文件的方法

    demo地址:https://github.com/cag2050/vue_cli_optimize_static_resource vue-cli 将静态资源文件放到 static 文件夹下并引用: 1.将 node_modules 下相应的 xxx.min.js,复制到项目 static 文件夹下 2.index.html 修改 添加script引入 <script src="static/js/vue.min.js"></script> <scrip

  • 浅谈 Vue 项目优化的方法

    好久不写博文了,本文作为我使用半年 vue 框架的经验小结,随便谈谈,且本文只适用于 vue-cli 初始化的项目或依赖于 webpack 打包的项目. 前几天看到大家说 vue 项目越大越难优化,带来很多痛苦,这是避免不了的,问题终究要解决,框架的性能是没有问题的,各大测试网站都有相关数据.下面进入正题 基础优化 所谓的基础优化是任何 web 项目都要做的,并且是问题的根源.HTML,CSS,JS 是第一步要优化的点 分别对应到 .vue 文件内的,<template>,<style&

  • 记一次vue-webpack项目优化实践详解

    项目现状 项目是一个数据监测平台,引入了ehcart和three.js 负责项目的数据可视化:打包后,体积高达2.1M,这个体积相比于我的项目规模来说就显得稍有笨重了 使用webpack-bundle-analyzer分析了一下各个文件所占用的比例: 整个项目文件分布大体清晰了,现在开始优化走起! 优化思路 根据 wba的显示,第三方插件是大部头,包括three.js echart组件和elementUI组件. three.js优化空间不大,主要关注另外两个上面. echarts 根据我的项目需

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

    vue.config.js 是一个可选的配置文件,如果项目的 (和 package.json 同级的) 根目录中存在这个文件,那么它会被 @vue/cli-service 自动加载.你也可以使用 package.json 中的 vue 字段,但是注意这种写法需要你严格遵照 JSON 的格式来写. 前言 在实际项目中优化也是经常需要做的事情,特别在中大型项目中降低打包体积大小,提高首屏加载时间是必不可少的,同时在面试中也是一个高频问题.本片文章我将从vue.config.js配置到项目优化前后效果

  • vue-cli3中vue.config.js配置教程详解

    前言 vue-cli3推崇零配置,其图形化项目管理也很高大上. 但是vue-cli3推崇零配置的话,导致了跟之前vue-cli2的配置方式都不一样了. 别名设置,sourcemap控制,输入文件位置和输出文件位置和输出的方式,压缩js控制,打包webapck日志分析,externals忽略配置(外部引入),调试的端口配置,proxy接口配置等等的. 有时候还需要我们配置的,因为官方推荐的,并不适用于我们平时的开发所用的. 所以,我的vue.config.js配置是下面这样的.还有一个改hash的

  • vue3中vue.config.js配置及注释详解

    目录 报错 打包时提示文件过大,配置解决方案,如下 总结 报错 asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).This can impact web performance.entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit

  • vue3.0 vue.config.js 配置基础的路径问题

    目录 vue3.0 vue.config.js 配置基础路径 vue3.0+ 3.x config配置 vue3.0 vue.config.js 配置基础路径 在和src同级的路径下创建一个文件名,vue.config.js(这文件名是固定这么写的) 在文件中写入 module.exports = {     baseUrl:'/',//根路径     outputDir:'dist',//打包的时候生成的一个文件名     assetsDir:'assets',//静态资源目录(js,css,

  • vue2之vue.config.js最全配置教程

    目录 配置目录: 一 . productionSourceMap 二. publicPath 三.outputDir 四.assetDir 五.devServer 六.lintOnSave 七.css的处理 八.chainWebpack vue.config.js 相当于之前的webpack 打包工具 配置目录: const path = require('path');   function resolve(dir) {   return path.join(__dirname, dir) }

  • @vue/cli4.x版本的vue.config.js常用配置方式

    目录 @vue/cli4.x的vue.config.js常用配置 vue-cli4.*配置vue.config.js文件配置内容不生效 解决 @vue/cli4.x的vue.config.js常用配置 设置访问端口号.访问IP地址.跨域代理,路径别名 const path = require('path') const CompressionPlugin = require('compression-webpack-plugin') // compression-webpack-plugin插件

  • vue.config.js完整配置教程

    目录 引言 1 介绍 查看默认的webpack配置 vue.config.js文件 2 基本配置 3 插件及规则的配置 4 规则rules的配置 4.1 rules的新增 4.2 rules的修改 5 插件plugins 的配置 5.1 plugins的新增 5.2 plugins的修改 5.3 plugins的删除 6 一些常见的配置 6.1 修改enter文件 6.2 DefinePlugin 6.3 自定义filename 及 chunkFilename 6.4 修改html-webpac

  • vue.config.js打包优化配置

    百度上的资料五花八门让人眼花缭乱,别急,这时候我替你亲身经历了,有需要的可以参考下,先上效果图,以免你们以为我吹牛逼,嘻嘻 优化方向 1.图片资源压缩 2.将 productionSourceMap 设为 false,map不进行生成 3.cdn配置(可选) 4.代码压缩 5.公共代码抽离(个人感觉没啥用) 未优化之前的 //感觉太大了 抬它 优化之后的 废话不多说了,上代码是重点 这些是必要的下载 /*cnpm install image-webpack-loader --save-dev c

  • 详解如何配置vue-cli3.0的vue.config.js

    本文介绍了如何配置vue-cli3.0的vue.config.js,分享给大家,具体如下: vue-cli 3 英文文档 vue-cli 3 中文文档 webpack 4 plugins webpack-chain TLDR vue-cli 3 与 2 版本有很大区别 vue-cli 3 的 github 仓库由原有独立的 github 仓库迁移到了 vue 项目下 vue-cli 3 的项目架构完全抛弃了 vue-cli 2 的原有架构,3 的设计更加抽象和简洁(此处后续可以详细介绍) vue

  • Vue-cli3项目配置Vue.config.js实战记录

    Vue-cli3 搭建的项目 界面想对之前较为简洁 之前的build和config文件夹不见了,那么应该如何配置 如webpack等的配那只需要在项目的根目录下vue.config.js 文件(是根目录,不是src目录 语法 module.exports = { // 基本路径 baseUrl: '/', // 输出文件目录 outputDir: 'dist', // eslint-loader 是否在保存的时候检查 lintOnSave: true, // use the full build

随机推荐