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 常用功能总结
Mar 18 Javascript
让jQuery与其他JavaScript库并存避免冲突的方法
Dec 23 Javascript
jquery 按键盘上的enter事件
May 11 Javascript
JavaScript中数组成员的添加、删除介绍
Dec 30 Javascript
js简单工厂模式用法实例
Jun 30 Javascript
Jsonp 关键字详解及json和jsonp的区别,ajax和jsonp的区别
Dec 30 Javascript
JavaScript 动态三角函数实例详解
Jan 08 Javascript
ES5学习教程之Array对象
Apr 01 Javascript
微信小程序 循环及嵌套循环的使用总结
Sep 26 Javascript
Angular实现的日程表功能【可添加及隐藏显示内容】
Dec 27 Javascript
webpack 插件html-webpack-plugin的具体使用
Apr 09 Javascript
React组件内事件传参实现tab切换的示例代码
Jul 04 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 魔术常量详解及实例代码
2016/12/04 PHP
yii2 在控制器中验证请求参数的使用方法
2019/06/19 PHP
Thinkphp 框架扩展之数据库驱动常用方法小结
2020/04/23 PHP
为开发者准备的10款最好的jQuery日历插件
2014/02/04 Javascript
详细探究ES6之Proxy代理
2016/07/22 Javascript
JS简单设置下拉选择框默认值的方法
2016/08/20 Javascript
bootstrap组件之按钮式下拉菜单小结
2017/01/19 Javascript
快速使用node.js进行web开发详解
2017/04/26 Javascript
解决VUEX刷新的时候出现数据消失
2017/07/03 Javascript
详解javascript常用工具类的封装
2018/01/30 Javascript
记一次webpack3升级webpack4的踩坑经历
2018/06/12 Javascript
小程序hover-class点击态效果实现
2019/02/26 Javascript
详解从vue-loader源码分析CSS Scoped的实现
2019/09/23 Javascript
如何修改Vue打包后文件的接口地址配置的方法
2020/04/22 Javascript
Vue中用JSON实现刷新界面不影响倒计时
2020/10/26 Javascript
用python删除java文件头上版权信息的方法
2014/07/31 Python
同时安装Python2 & Python3 cmd下版本自由选择的方法
2017/12/09 Python
[原创]python爬虫(入门教程、视频教程)
2018/01/08 Python
浅析PHP与Python进行数据交互
2018/05/15 Python
Python3.5模块的定义、导入、优化操作图文详解
2019/04/27 Python
Selenium+Python 自动化操控登录界面实例(有简单验证码图片校验)
2019/06/28 Python
python异常触发及自定义异常类解析
2019/08/06 Python
python 上下文管理器及自定义原理解析
2019/11/19 Python
python中对二维列表中一维列表的调用方法
2020/06/07 Python
浅谈Python中的继承
2020/06/19 Python
python 识别登录验证码图片功能的实现代码(完整代码)
2020/07/03 Python
keras实现VGG16方式(预测一张图片)
2020/07/07 Python
深入了解canvas在移动端绘制模糊的问题解决
2019/04/30 HTML / CSS
html5自定义video标签的海报与播放按钮功能
2019/12/04 HTML / CSS
波兰在线体育用品商店:Hop-Sport.pl
2019/07/23 全球购物
物业管理求职自荐信
2013/09/25 职场文书
自我评价范文分享
2014/01/04 职场文书
如何写一封打动人心的求职信
2014/02/17 职场文书
丽江古城导游词
2015/02/03 职场文书
python保存大型 .mat 数据文件报错超出 IO 限制的操作
2021/05/10 Python
《我的美好婚事》动画化决定纪念插画与先导PV公开
2022/04/06 日漫