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 相关文章推荐
javascript修改IMG标签的src问题
Mar 28 Javascript
JavaScript闭包详解
Feb 02 Javascript
JavaScript动态改变表格单元格内容的方法
Mar 30 Javascript
基于jquery实现可定制的web在线富文本编辑器附源码下载
Nov 17 Javascript
在JS中a标签加入单击事件屏蔽href跳转页面
Dec 16 Javascript
JScript实现表格的简单操作
Aug 15 Javascript
微信小程序日历效果
Dec 29 Javascript
react写一个select组件的实现代码
Apr 03 Javascript
jQuery实现带3D切割效果的轮播图功能示例【附源码下载】
Apr 04 jQuery
微信小程序登录态和检验注册过没的app.js写法
May 22 Javascript
js验证密码强度解析
Mar 18 Javascript
详解Howler.js Web音频播放终极解决方案
Aug 23 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防止站外远程提交表单的方法
2014/10/20 PHP
Yii框架在页面输出执行sql语句以方便调试的实现方法
2014/12/24 PHP
服务器上配置PHP运行环境教程
2015/02/12 PHP
javascript引用对象的方法代码
2007/08/13 Javascript
jquery动画3.创建一个带遮罩效果的图片走廊
2012/08/24 Javascript
jquery next nextAll nextUntil siblings的区别介绍
2013/10/05 Javascript
wangEditor编辑器失去焦点后仍然可以在原位置插入图片分析
2015/05/06 Javascript
jquery ztree异步搜索(搜叶子)实践
2016/02/25 Javascript
在IE8上JS实现combobox支持拼音检索功能
2016/05/23 Javascript
深入理解事件冒泡(Bubble)和事件捕捉(capture)
2016/05/28 Javascript
基于JS实现数字+字母+中文的混合排序方法
2016/06/06 Javascript
微信小程序 二维码canvas绘制实例详解
2017/01/06 Javascript
jquery请求servlet实现ajax异步请求的示例
2017/06/03 jQuery
jQuery 表单序列化实例代码
2017/06/11 jQuery
详解使用vue-admin-template的优化历程
2018/05/20 Javascript
layui动态渲染生成左侧3级菜单的方法(根据后台返回数据)
2019/09/23 Javascript
JavaScript适配器模式原理与用法实例详解
2020/03/09 Javascript
[02:40]DOTA2殁境神蚀者 英雄基础教程
2013/11/26 DOTA
python和C语言混合编程实例
2014/06/04 Python
PyQt弹出式对话框的常用方法及标准按钮类型
2019/02/27 Python
查看python安装路径及pip安装的包列表及路径
2019/04/03 Python
python脚本之一键移动自定格式文件方法实例
2019/09/02 Python
Python爬取爱奇艺电影信息代码实例
2019/11/26 Python
python爬虫模拟浏览器访问-User-Agent过程解析
2019/12/28 Python
Python基于requests库爬取网站信息
2020/03/02 Python
基于Python共轭梯度法与最速下降法之间的对比
2020/04/02 Python
python time.strptime格式化实例详解
2021/02/03 Python
CSS3五个技巧给你的网站带来出色的效果
2009/04/02 HTML / CSS
移动端Html5页面生成图片解决方案
2018/08/07 HTML / CSS
美国男装连锁零售商:Men’s Wearhouse
2016/10/14 全球购物
印尼综合在线预订网站:Tiket.com(机票、酒店、火车、租车和娱乐)
2018/10/11 全球购物
晚会邀请函范文
2014/01/24 职场文书
优秀毕业生推荐信范文
2014/03/07 职场文书
总经理助理的职责
2014/03/14 职场文书
财务管理专业求职信
2014/06/11 职场文书
Python turtle编写简单的球类小游戏
2022/03/31 Python