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 相关文章推荐
对setInterval在火狐和chrome切换标签产生奇怪的效果之探索,与解决方案!
Oct 29 Javascript
深入理解JavaScript系列(16) 闭包(Closures)
Apr 12 Javascript
JS关闭窗口或JS关闭页面的几种代码分享
Oct 25 Javascript
JSON无限折叠菜单编写实例
Dec 16 Javascript
JavaScript整除运算函数ceil和floor的区别分析
Apr 14 Javascript
JS基于cookie实现来宾统计记录访客信息的方法
Aug 04 Javascript
JS模拟酷狗音乐播放器收缩折叠关闭效果代码
Oct 29 Javascript
JavaScript模块化之使用requireJS按需加载
Apr 12 Javascript
vue2.0 循环遍历加载不同图片的方法
Mar 06 Javascript
ES6 Set结构的应用实例分析
Jun 26 Javascript
微信小程序 多行文本显示...+显示更多按钮和收起更多按钮功能
Sep 26 Javascript
基于JavaScript判断两个对象内容是否相等
Jan 10 Javascript
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实现多线程
2019/01/27 PHP
用js实现多域名不同文件的调用方法
2007/01/12 Javascript
网页自动刷新,不产生嗒嗒声的一个解决方法
2007/03/27 Javascript
JavaScript导出Excel实例详解
2014/11/25 Javascript
简易的投票系统以及js刷票思路和方法
2015/04/07 Javascript
JavaScript中的getDay()方法使用详解
2015/06/09 Javascript
JavaScript实现点击按钮复制指定区域文本(推荐)
2016/11/25 Javascript
javascript自执行函数
2017/02/10 Javascript
Bootstrap缩略图的创建方法
2017/03/22 Javascript
Cropper.js 实现裁剪图片并上传(PC端)
2017/08/20 Javascript
JavaScript中常见内置函数用法示例
2018/05/14 Javascript
vue 表单输入格式化中文输入法异常问题
2018/05/30 Javascript
使用weixin-java-tools完成微信授权登录、微信支付的示例
2018/09/26 Javascript
javascript 使用sleep函数的常见方法详解
2020/04/26 Javascript
nodejs各种姿势断点调试的方法
2020/06/18 NodeJs
[04:09]2018年度DOTA2社区贡献奖-完美盛典
2018/12/16 DOTA
python解析中国天气网的天气数据
2014/03/21 Python
python中字典(Dictionary)用法实例详解
2015/05/30 Python
Python cookbook(数据结构与算法)保存最后N个元素的方法
2018/02/13 Python
Django中url的反向查询的方法
2018/03/14 Python
Python中的字符串切片(截取字符串)的详解
2019/05/15 Python
Python检查 云备份进程是否正常运行代码实例
2019/08/22 Python
python实现飞机大战项目
2020/03/11 Python
python实现最短路径的实例方法
2020/07/19 Python
Python unittest生成测试报告过程解析
2020/09/08 Python
利用HTML5 Canvas API绘制矩形的超级攻略
2016/03/21 HTML / CSS
比利时买床:Beter Bed
2017/12/06 全球购物
一套Delphi的笔试题一
2016/02/14 面试题
实用求职信范文分享
2013/12/25 职场文书
淘宝网店营销策划书
2014/01/11 职场文书
学雷锋演讲稿
2014/03/04 职场文书
离婚协议书范文2014
2014/10/16 职场文书
给朋友的道歉短信
2015/05/12 职场文书
欠条样本
2015/07/03 职场文书
2015年高三年级组工作总结
2015/07/21 职场文书
SQL Server数据库查询出现阻塞之性能调优
2022/04/10 SQL Server