Vue基础学习之项目整合及优化


Posted in Javascript onJune 02, 2019

前言

使用 webpack 构建过 Vue 项目的同学应该知道 alias 的作用,我们可以使用它将复杂的文件路径定义成一个变量来访问。在不使用 alias 的项目中,我们引入文件的时候通常会去计算被引入文件对于引入它的文件的相对路径,比如像这样

import HelloWorld from '../../../../HelloWorld.vue'

一旦相对层次结构较深,我们就很难去定位所引入文件的具体位置,其实这并不是我们应该操心的地方,完全可以交给 webpack 来进行处理。在原生的 webpack 配置中我们可以定义 alias 来解决这一问题:

const path = require('path')

const resolve = dir => {
 return path.join(__dirname, dir)
}

module.exports = {
 ...
 
 resolve: {
 alias: {
 '@': resolve('src'), // 定义 src 目录变量
 _lib: resolve('src/common'), // 定义 common 目录变量,
 _com: resolve('src/components'), // 定义 components 目录变量,
 _img: resolve('src/images'), // 定义 images 目录变量,
 _ser: resolve('src/services'), // 定义 services 目录变量,
 }
 },
 
 ...
}

上方我们在 webpack resolve (解析)对象下配置 alias 的值,将常用的一些路径赋值给了我们自定义的变量,这样我们便可以将第一个例子简化为:

import HelloWorld from '_com/HelloWorld.vue'

而在 CLI 3.x 中我们无法直接操作 webpack 的配置文件,我们需要通过 chainWebpack 来进行间接修改,代码如下

/* vue.config.js */
module.exports = {
 ...
 
 chainWebpack: config => {
 config.resolve.alias
 .set('@', resolve('src'))
 .set('_lib', resolve('src/common'))
 .set('_com', resolve('src/components'))
 .set('_img', resolve('src/images'))
 .set('_ser', resolve('src/services'))
 },
 
 ...
}

这样我们修改 webpack alias 来简化路径的优化就实现了。但是需要注意的是对于在样式及 html 模板中引用路径的简写时,前面需要加上 ~ 符,否则路径解析会失败,如:

.img {
 background: (~_img/home.png);
}

二、整合功能模块

在多页应用的构建中,由于存在多个入口文件,因此会出现重复书写相同入口配置的情况,这样对于后期的修改和维护都不是特别友好,需要修改所有入口文件的相同配置,比如在 index 单页的入口中我们引用了 VConsole 及 performance 的配置,同时在 Vue 实例上还添加了 $openRouter 方法:

import Vue from 'vue'
import App from './index.vue'
import router from './router'
import store from '@/store/'
import { Navigator } from '../../common'

// 如果是非线上环境,不加载 VConsole
if (process.env.NODE_ENV !== 'production') {
 var VConsole = require('vconsole/dist/vconsole.min.js');
 var vConsole = new VConsole();

 Vue.config.performance = true;
}

Vue.$openRouter = Vue.prototype.$openRouter = Navigator.openRouter;

new Vue({
 router,
 store,
 render: h => h(App)
}).$mount('#app')

而在 page1 和 page2 的入口文件中也同样进行了上述配置,那我们该如何整合这些重复代码,使其能够实现一次修改多处生效的功能呢?最简单的方法便是封装成一个共用方法来进行调用,这里我们可以在 common 文件夹下新建 entryConfig 文件夹用于放置入口文件中公共配置的封装,封装代码如下

import { Navigator } from '../index'

export default (Vue) => {

 // 如果是非线上环境,不加载 VConsole
 if (process.env.NODE_ENV !== 'production') {
 var VConsole = require('vconsole/dist/vconsole.min.js');
 var vConsole = new VConsole();

 Vue.config.performance = true;
 }

 Vue.$openRouter = Vue.prototype.$openRouter = Navigator.openRouter;
}

上述代码我们向外暴露了一个函数,在调用它的入口文件中传入 Vue 实例作为参数即可实现内部功能的共用,我们可以将原本的入口文件简化为:

import Vue from 'vue'
import App from './index.vue'
import router from './router'
import store from '@/store/'
import entryConfig from '_lib/entryConfig/'

// 调用公共方法加载配置
entryConfig(Vue)

new Vue({
 router,
 store,
 render: h => h(App)
}).$mount('#app')

三、开启 Gzip 压缩

/* vue.config.js */
const isPro = process.env.NODE_ENV === 'production'

module.exports = {
 ...
 
 configureWebpack: config => {
 if (isPro) {
  return {
  plugins: [
   new CompressionWebpackPlugin({
    // 目标文件名称。[path] 被替换为原始文件的路径和 [query] 查询
   asset: '[path].gz[query]',
   // 使用 gzip 压缩
   algorithm: 'gzip', 
   // 处理与此正则相匹配的所有文件
   test: new RegExp(
    '\\.(js|css)$'
   ),
   // 只处理大于此大小的文件
   threshold: 10240,
   // 最小压缩比达到 0.8 时才会被压缩
   minRatio: 0.8,
   })
  ]
  }
 }
 }
 ...
}

上方我们通过在生产环境中增加 Gzip 压缩配置实现了打包后输出增加对应的 .gz 为后缀的文件,而由于我们配置项中配置的是只压缩大小超过 10240B(10kB)的 JS 及 CSS,因此不满足条件的文件不会进行 Gzip 压缩。

Gzip 压缩能在普通压缩的基础上再进行 50% 以上 的压缩,我们可以直接来看下控制台的输出对比图

Vue基础学习之项目整合及优化

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
简单常用的幻灯片播放实现代码
Sep 25 Javascript
JavaScript实现两个Table固定表头根据页面大小自行调整
Jan 03 Javascript
js判断登录与否并确定跳转页面的方法
Jan 30 Javascript
Javascript数据结构与算法之列表详解
Mar 12 Javascript
javascript文件加载管理简单实现方法
Jul 25 Javascript
原生JS实现仿淘宝网左侧商品分类菜单效果代码
Sep 10 Javascript
JS正则匹配中文的方法示例
Jan 06 Javascript
解决Node.js使用MySQL出现connect ECONNREFUSED 127.0.0.1:3306的问题
Mar 09 Javascript
JavaScript函数中的this四种绑定形式
Aug 15 Javascript
基于react组件之间的参数传递(详解)
Sep 05 Javascript
浅谈Vue2.4.0 $attrs与inheritAttrs的具体使用
Mar 08 Javascript
vue.js实现点击图标放大离开时缩小的代码
Jan 27 Vue.js
JavaScript判断对象和数组的两种方法
May 31 #Javascript
vue中node_modules中第三方模块的修改使用详解
May 31 #Javascript
Vuex新手的理解与使用详解
May 31 #Javascript
一文快速了解JQuery中的AJAX
May 31 #jQuery
gulp构建小程序的方法步骤
May 31 #Javascript
jQuery实现动态加载(按需加载)javascript文件的方法分析
May 31 #jQuery
自定义javascript验证框架示例【附源码下载】
May 31 #Javascript
You might like
php array的学习笔记
2012/05/16 PHP
PHP实现显示照片exif信息的方法
2014/07/11 PHP
PHP连接MSSQL2008/2005数据库(SQLSRV)配置实例
2014/10/22 PHP
如何直接访问php实例对象中的private属性详解
2017/10/12 PHP
浅析PHP类的反射来实现依赖注入过程
2018/02/06 PHP
PHP pthreads v3在centos7平台下的安装与配置操作方法
2020/02/21 PHP
jQuery中选择器小问题(新人难免遇到)
2014/03/31 Javascript
JavaScript 基本概念
2015/01/20 Javascript
JS实现的左侧竖向滑动菜单效果代码
2015/10/19 Javascript
基于jquery实现页面滚动时顶部导航显示隐藏
2020/04/20 Javascript
微信小程序联网请求的轮播图
2017/07/07 Javascript
使用Node.js搭建静态资源服务详细教程
2017/08/02 Javascript
axios使用拦截器统一处理所有的http请求的方法
2018/11/02 Javascript
详解三种方式解决vue中v-html元素中标签样式
2018/11/22 Javascript
Electron autoUpdater实现Windows安装包自动更新的方法
2018/12/24 Javascript
详解关于html,css,js三者的加载顺序问题
2019/04/10 Javascript
Element实现表格分页数据选择+全选所有完善批量操作
2019/06/07 Javascript
vue 动态表单开发方法案例详解
2019/12/02 Javascript
如何在 ant 的table中实现图片的渲染操作
2020/10/28 Javascript
vue使用exif获取图片经纬度的示例代码
2020/12/11 Vue.js
使用python将图片格式转换为ico格式的示例
2018/10/22 Python
selenium+python自动化测试之使用webdriver操作浏览器的方法
2019/01/23 Python
python-视频分帧&多帧合成视频实例
2019/12/10 Python
Python中join()函数多种操作代码实例
2020/01/13 Python
python 实现数据库中数据添加、查询与更新的示例代码
2020/12/07 Python
五分钟学会怎么用python做一个简单的贪吃蛇
2021/01/12 Python
个人贷款承诺书
2014/03/28 职场文书
《恐龙》教学反思
2014/04/27 职场文书
成立公司计划书
2014/05/07 职场文书
食品药品安全责任书
2015/05/11 职场文书
离婚起诉书范本
2015/05/18 职场文书
2015小学五年级班主任工作总结
2015/05/21 职场文书
goland 清除所有的默认设置操作
2021/04/28 Golang
Python打包为exe详细教程
2021/05/18 Python
Redis中缓存穿透/击穿/雪崩问题和解决方法
2021/12/04 Redis
代码复现python目标检测yolo3详解预测
2022/05/06 Python