vue-cli3项目搭建配置以及性能优化

vuecli3项目搭建配置以及性能优化

在之前的开发中主要用的是vue-cli2,最近空闲时间比较多,接下来有新项目,本着偷懒的本能,自己打算搭建一个基础包以备后期开发应用,并对其进行性能优化和配置

搭建整个过程如下:

  • 初始化项目
  • 修改目录结构
  • 多环境运行
  • axios封装
  • 模块化vuex
  • 全局引用样式
  • 移动端适配配置
  • 常用util
  • 引入第三方UI框架
  • 配置vue.config.js文件
  • vue项目框架性能优化(重点) (v1_mint_ui分支)

1.项目初始化

  • 创建项目

可用命令行或者ui面板进行创建,具体的创建方式及详细说明,可以参考我的另一篇文章 vue-cli3初始化项目搭建

  • 运行项目

vue-cli3项目搭建配置以及性能优化

2.修改目录结构

用编辑器打开后可以看到目录结构。相对于vue-cli2精简了很多,减少了对webpack的配置。

vue-cli3项目搭建配置以及性能优化
  • node_modules 文件夹 项目依赖(对webpack进行了封装)
  • public 文件夹1.favicon.ico 是 网站图标2.index.html 页面入口文件
  • src 文件夹main.js 入口jsassets 存放静态文件components 存放公用组件App.vue 入口vue文件
  • .eslintrc.js 配置
  • .gitignore 指定文件无需提交到git上
  • balel.config.js 使用一些预设
  • package.json 项目描述及依赖
  • package-lock.json 版本管理使用的文件

由于现在的目录结构不利于后期的开发,现在我们增加部分文件,待后续可以进行功能扩展。在src文件下:新建api文件夹,config文件夹,router文件夹,utils文件夹,views文件夹,store文件夹。并在其文件下建子目录,详细请参考目录截图:

vue-cli3项目搭建配置以及性能优化

2.多环境运行

由于我们的项目需要在不同环境下进行运行(开发,生产,测试等),这避免我们需要多次的去切换请求的地址以及相关的配置,vue-cli2是可以直接在config文件中进行配置的,但是vue-cli3已经简化了,官方文档也有进行配置的说明,实现具体有以下2种方法,我比较偏向第二种。

  • 第一种实现方法

1.在根目录新建2个文件,分别为.env.development.env.production.env.test。注意文件是只有后缀的。

.env.development 模式用于serve,开发环境,就是开始环境的时候会引用这个文件里面的配置

.env.production模式用于build,线上环境。

.env.test 测试环境

2.分别在文件内写上:

开发环境:

线上环境:

测试环境:

当需要用到该变量是可以用process.env.VUE_APP_BASE_API进行取值。

3.更改package.json文件

  • 第二种实现方式

1.在config文件新建index.js文件,根据全局的环境变量来进行判断,并进行输出。代码如下:

  1. 更改package.json文件

  1. 引用的方法可以参照如下:

4.运行命令行

npm run dev // 开发环境

npm run test // 测试环境

npm run build // 正式环境打包

npm run build:test // 测试环境打包

2. axios封装

在vue项目中,和后台交互获取数据这块,我们通常使用的是axios库,它是基于promise的http库,可运行在浏览器端和node.js中。他有很多优秀的特性,例如拦截请求和响应、取消请求、转换json、客户端防御XSRF等。所以我们的尤大大也是果断放弃了对其官方库vue-resource的维护,直接推荐我们使用axios库。如果还对axios不了解的,可以移步axios文档

  • 安装依赖

  • 配置axios

在uitls文件下新增request.js文件,在这里我们对axios进行初始化后,暴露给需要引用的文件,方便开发。

创建axios实例,并进行配置

利用axios的请求拦截和响应拦截可以对登录和权限方面进行控制,具体需求可以自己进行配置。完整代码如下:

  • api请求配置

在api文件下新建分类的api请求文件。根据具体需要分类。主要是方便团队开发,容易归类。可以参考下面配置。

业务中需要进行请求可以用import后,进行传参即可。

4.模块化vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。

如果对vuex还不大了解的可以自行阅读vuex官方文档

  • 安装vuex

  • 新建目录

modules文件主要用法存放分类的文件,可以进行区分,getters文件是对state进行处理,index.js主要进行一些引入,初始化操作。

vue-cli3项目搭建配置以及性能优化
  • 书写vuex配置

index.js文件

getter.js文件

getter中的配置可根据需求进行增加或者删除,下面是示例。

moduels/user.js文件

该文件为与业务相关,可以跟据具体参见进行增加和删除命名。每个文件的基本配置和用法如下:

5.全局样式引用

在项目开发过程中,我们经常需要全局样式引用,例如主题色等,如果每次去写的化会变得很麻烦。因为我们应该了sass预语言编译,所以可以大胆的应用其特性。例如变量,函数,混入等。但是我们需要在项目中进行全局的配置才能有效果。不用在每一个页面都进行引入样式,就能直接引用。

  • 新建目录

在assets下新建如下文件,具体的代码自行进行配置

vue-cli3项目搭建配置以及性能优化
  • 全局引入

新建vue.config.js文件,并写上以下代码

在app.vue中引入reset.scss文件,完成后,样式即可进行全局调用了。

6.移动端适配配置

在本项目中主要用rem来进行页面的适配操作的,因为rem就可以随根字体大小改变而改变,从而实现了自适应的功能。但是html的字体是固定的,所以需要监听页面大小的变化,我主要用了淘宝的amfe-flexible来进行监听改变的。将项目中css的px转成rem单位,免去计算烦恼,我们可以用scss来进行计算或者利用px2rem插件来进行自动转化。因为是开发移动端,需把mate换为
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale= 1.0, minimum-scale=1.0">
实现方法如下:

  • 安装amfe-flexible

npm i amfe-flexible --save

  • px转rem

方法一:

在common.scss文件中,全局引入scss函数:

调用方式直接: width: px2rem(175);

方法二:

安装依赖

package.json内,在postcss内添加:

7.常用util

该文件主要是对一些常用的js进行封装,例如时间格式化,LocalStorage操作等,相对比较常用的方法,这个文件可以进行保存,要用到时直接复制过来用即可。下面是我封装LocalStorage的文件,可参考以下,其他自行设置

8.引入第三方UI框架

在前端开发过程中,避免一些造轮子情况出现,经常需要一些ui框架,可以根据自己需要引入第三方UI框架,自己进行配置,我选择了mintui来进行引入。采用了按需引入的方式。

  • 安装依赖

npm i mint-ui -S

  • 配置按需引入

借助 babel-plugin-component,我们可以只引入需要的组件,以达到减小项目体积的目的。如果全部引入,文件太大了。

首先,安装 babel-plugin-component

npm install babel-plugin-component -D
然后,将 .babel.config.js 修改为:

如果你只希望引入部分组件,比如 Button 和 Cell,那么需要在 main.js 中写入以下内容:

9.配置vue.config.js文件

  • 基本配置1.文件目录配置别名
    我们可以把src配置为@,如果需要就不用到根目录开始写了,直接用@/xxx/进行引用。根据自己需要进行配置,在vue.config.js文件中加入代码 // 配置 chainWebpack: (config)=>{ // 配置别名 config.resolve.alias .set('@', resolve('src')) .set('assets',resolve('src/assets')) .set('components',resolve('src/components')) .set('router',resolve('src/router')) .set('utils',resolve('src/utils')) .set('static',resolve('src/static')) .set('store',resolve('src/store')) .set('views',resolve('src/views')) } 2.跨域配置
    在前端请求过程中,如果后台没有设置跨域请求的,可以在webpack进行配置。devServer: { proxy: { '/api': { target: 'http://127.0.0.1:8080', changeOrigin: true } } } 3.其他配置
    具体可以参照官网的配置说明,在项目中我用到了assetsDir: 'assets', // 静态文件目录 publicPath: './', // 编译后的地址,可以根据环境进行设置 lintOnSave: true, // 是否开启编译时是否不符合eslint提示 以上的所有代码必须写在module.exports输出才能生效. 详细的配置可参考官网 vue-cli3

10.项目框架性能优化 (v1_mint_ui分支)

通过以上的基本配置,项目已经符合我们工作需要了,但是在工作过程中会发现随着项目的集成度越来越高,业务越来越多。出现了加载慢和打包文件过大的问题。导致我们页面白屏时间过长,用户体验不友好。那么如果你感兴趣的话,可以进行以下的配置,可以大大大大大的减小体积和加载速度。在master分支是没有进行优化的,如果需要看优化代码可以到另外一个分支。所以在页面引入的代码都是当前页面需要的执行代码,可以往下面几个方法进行处理。

  • js,css代码的最小化压缩和分割
  • js,css代码公用代码提取, 按需引入(cdn加载)
  • 图片文件的压缩
  • gzip的压缩
  • 去除console.log

1.js,css代码的最小化压缩和分割

首先,我们先对js文件进行配置以达到压缩效果,先看一下没有配置代码情况,整个app.js 的文件是2.8M(因为是初始项目),但是如果页面一多,就不只这个数了。

vue-cli3项目搭建配置以及性能优化

我们会通过chainWebpak来处理. 在优化前, 看下相关文件的响应代码: 看下app.js文件的返回代码:代码如下:

vue-cli3项目搭建配置以及性能优化

在vue.config.js文件中加入,run以下后查看app.js情况,文件会变小(由于初始项目体积小,看不出多大区别)。

vue-cli3项目搭建配置以及性能优化

分割代码,相应的文件中存入分割后的代码。

vue-cli3项目搭建配置以及性能优化

加入以上代码后,分成了2个文件,最大的只有2.7M了,这样可以分成多个进行加载,可以达到最快化,但是一定要平衡文件大小的和分割出来的文件数量的平衡, 数量多了, 请求也会变慢的, 影响性能.可以根据项目的进行设置,具体可参考官方文档的详细说明。

2.js,css代码公用代码提取, 按需引入(CDN加载)

把公用代码提取出来,然后采用使用免费的cdn资源进行加载。在项目中我们主要是引入引入不同的模块库才会导致文件较大,那么是否可以把这些文件进一步处理,答案是可以的,比如vue, vuex, vue-router, element-ui等公共资源库。利用webpack我们可以使用externals参数来配置:

在vue.config.js文件:

index.html加入CDN地址,注意引入的时候要写在body里面,否则会报错。

mint-ui样式通过CDN引入。然后商储mian.js文件的 import ‘mint-ui/lib/style.css’ (全局引入模式才有)

如果需要引入其他依赖的CDN可以通过BootCDN查找进行引入。

重新运行项目, 看看效果,已经大大的减小了很多,到了k级别了:

vue-cli3项目搭建配置以及性能优化

提取css代码:

因为js会动态的加载出css,所以js文件包会比较大,那么需要提取css代码到文件. 这里我们只需要将css配置一下:

vue-cli3项目搭建配置以及性能优化

3.图片文件的压缩

图片文件大于在webpack设定的值时,我们可以对其进行压缩在进行引入,安利给大家一个压缩图片的网站https://tinypng.com/,它可以批量的压缩图片又不会失真,压缩比相对较大。可以对图片进行有效压缩。

4.gzip的压缩

如果后台有对前端的代码进行gzip压缩的话,那么就不需要进行压缩了,后台自己配置就可以。如果后台不具备这种情况那么我们可以利用compression-webpack-plugin插件可以帮助我们进行gzip压缩:

安装依赖:

然后引入相关代码:

重新run一遍,出现了意向不到的结果了。又原来的2.8M转化为250+kb了,缩小了11倍以上。重大突破

vue-cli3项目搭建配置以及性能优化

6.去除console.log

正常情况下我们会在开发环境进行console调试,但是如果不删除,过多会出现内存泄漏的情况,那么我们可以在正式环境的时候就把它给干掉,实现方法如下:

方法一:

方法二:使用babel-plugin-transform-remove-console插件
npm i --save-dev babel-plugin-transform-remove-console
在babel.config.js中配置

未经允许不得转载:一点博客-青梅煮码-共享博客 » vue-cli3项目搭建配置以及性能优化
分享到:
赞(0) 打赏

评论抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏