Vue基础学习之项目整合及优化
作者:Poetry’s Blog 发布时间:2024-05-21 10:28:49
前言
使用 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% 以上 的压缩,我们可以直接来看下控制台的输出对比图
来源:http://blog.poetries.top/2019/06/01/vue-opz/
猜你喜欢
- 1. 排序有什么用“排序”这个专业名词原本是来源于计算机程序操作中的,是一种很常见的算法设计,当然,对交互设计来说,探讨冒泡排序和堆排序之间
- 容我废话一下最近几个月,毒教材被曝光引发争议,那些编写度教材的人着实可恶。咱程序员也没有手绘插画能力,但咱可以借助强大的深度学习模型将视频转
- 一、Pytorch创建张量的4种方法Pytorch创建张量的4种方法主要有:torch.Tensor()、torch.tensor()、to
- 你好由于你是游客无法查看本文请你登录再进谢谢合作。。。。。当你在爬某些网站的时候需要你登录才可以获取数据咋整?莫慌把这几招传授给你让你以后从
- 昨天,一同事发过来的一道数据库题目,就是哪种经典的父子级 ID 在同一数据库表中设计类型。需要在原表中添加一个字段,同时,将该节点的父子级详
- 发送邮件概述:Django中内置了邮件发送功能,发送邮件需要使用SMTP服务,常用的免费服务器有:163、126、QQ注册并登陆163邮箱打
- 这篇文章主要介绍了Python实现word2Vec model过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学
- 前言爬虫和反爬虫日益成为每家公司的标配系统。爬虫在情报获取、虚假流量、动态定价、恶意攻击、薅羊毛等方面都能起到很关键的作用,所以每家公司都或
- stdClass类是PHP的一个内部保留类,初始时没有成员变量也没成员方法,所有的魔术方法都被设置为NULL,可以使用其传递变量参数,但是没
- 我就废话不多说了,大家还是直接看代码吧~old_record=numpy.load('exist.npy')temp_rec
- 加入CDC的这段日子里,工作中积累的小心得都密密麻麻的收在册子里。恰逢近期的校园招聘正如火如荼的展开着,借此机会,我把这一些不太成熟的小想法
- 技术背景在一些对python开源库代码的安全扫描中,我们有可能需要分析库中所使用到的函数是否会对代码的执行环境造成一些非预期的影响。典型的例
- -crop参数是从一个图片截取一个指定区域的子图片.格式如下:convert -crop widthxheight{+-
- MySQL时间盲注五种延时方法 (PWNHUB 非预期解)延时注入函数五种:sleep(),benchmark(t,exp),笛卡尔积,GE
- 如何一行输入多个数,并存入列表在python里,如果你仅使用input()的话是输入一行的内容并将该行的内容以字符串的形式存到变量中,但如果
- Python在用GPU跑模型的时候最好开多进程,因为很明显这种任务就是计算密集型的。用进程池好管理,但是tensorflow默认情况会最大占
- matplotlib默认根据数据系列自动缩放坐标轴范围。pyplot模块中的autoscale函数可以切换是否自动缩放坐标轴范围,xlim(
- 闭包闭包就是能够读取其他函数内部变量的函数。def test1(k, b): def test1_1(x): &n
- 1.创建一个类Rectangle,已知a、b求面积,求三角形的面积2.结合题目一,从题目一文件中读取数据,并采用类的方法,将计算的结果写在另
- 对于电脑上没有Visual C++ 2019.exe 而导致安装不了Mysql Install的朋友,此详细步骤会更加明了。一、下载(官方网