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% 以上 的压缩,我们可以直接来看下控制台的输出对比图

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

来源:http://blog.poetries.top/2019/06/01/vue-opz/

标签:vue,整合,优化
0
投稿

猜你喜欢

  • Oracle 存储过程加密方法

    2009-10-23 18:02:00
  • Python运算符重载的简单实例代码

    2021-02-13 11:21:22
  • Go利用反射reflect实现获取接口变量信息

    2024-04-26 17:24:25
  • Access 2002的三个实用技巧

    2007-10-22 12:22:00
  • asp数字或者字符排序函数代码

    2011-02-24 11:00:00
  • python实现银行实战系统

    2023-04-14 18:55:19
  • openfiledialog读取txt写入数据库示例

    2024-01-16 02:03:35
  • python3实现ftp服务功能(服务端 For Linux)

    2022-05-18 06:05:03
  • Python OpenCV实现基本图形绘制

    2023-09-25 12:34:08
  • 树莓派实现移动拍照

    2021-10-07 18:02:25
  • 使用python批量化音乐文件格式转换的实例

    2022-11-24 02:48:16
  • Python random模块用法解析及简单示例

    2022-06-02 11:05:14
  • JSP 获取spring容器中bean的两种方法总结

    2023-06-15 07:27:46
  • linux mysql 报错:MYSQL:The server quit without updating PID file

    2024-01-22 08:40:47
  • Windows安装Anaconda3的方法及使用过程详解

    2022-03-03 06:20:10
  • Opera Mini 5 网站开发速记

    2010-04-20 16:29:00
  • Keras中的两种模型:Sequential和Model用法

    2021-10-16 07:04:32
  • 查找sqlserver查询死锁源头的方法 sqlserver死锁监控

    2024-01-23 01:10:46
  • python GUI库图形界面开发之PyQt5美化窗体与控件(异形窗体)实例

    2023-07-19 00:34:06
  • Python基于Opencv识别两张相似图片

    2021-01-13 20:16:42
  • asp之家 网络编程 m.aspxhome.com