vue 路由分开打包_Vue五个优化小技巧

作者：卖好车大前端团队来源：https://juejin.im/post/5ec730bae51d4578732e61b6

一. Vue 批量注册全局组件

1.在全局组件 components 文件夹下新增 global.js 文件 该文件为全局组件配置文件，文件内容如下：

important Vue from 'vue'
function changeStr (str) {
//charAt  去字符的第一个自检 abc => Abc
return str.charAt(0).toUpperCase() + str.slice(1)
}
//require.context(a,b,c)  a => 目录  b => 是否有子目录  c => 匹配文件的正则
const requireComponent = require.context('.', false, /\.vue$/)
requireComponent.keys().forEach(fillName => {
//第i个
const config = requireComponent(fillName)
const componentName = changeStr(
	    fillName.replace(/^\.\//,'').replace(/\.\w+$/,'')
	)
	Vue.component(componentName, config.default || config)
})

创建该文件之后，就可以直接在 components 文件内编写全局组件，由于 require.context( )中的第二个参数填写的是 false，所以所有组件都需要以 .vue 文件的形式直接存放在 components 文件下

2.在main.js全局引入该global.js

注意：注册全局组件会带来性能的损耗，所以需要清除该方法的使用场景，只有在组件频繁使用的情况下适 合使用，比如一些表格、弹框、提示框、输入框等组件

二. Vue 主路由优化

主要原理：使用 webpack 的 require.context() API

假设 demo 中有两个模块，home 和 login

1.在项目 router 文件夹下面新增 home.router.js 和 login.router.js 进行分区 大致内容：

export default {
path: '/home',
redirect: '/home',
component: () => import('@/views/layout'),
meta: {    //路由的排序会根据该权限码的大小进行升序排序
    role: [10000],
title: '首页'  
	},
children: [
    {
path: '',
name: 'home',
component: () => import('@/views/home/index'),
meta: {
title: '平台首页',
icon: 'iconfont icon-shouye',
role: [11000],
      },
		},
  ],
}

2.在 router 文件夹的主路由文件夹中批量引入分区路由

大致内容：

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
let routerList = []
function importAll (obj) {
//r(key).default 是因为分区路由导出时采用 export default
  obj.keys().forEach(
(key) => routerList.push(obj(key).default)
  )
}
importAll(require.context('.', false, /\.router\.js/))

总结：该方法的好处在于，降低大型项目的路由复杂度，对路由进行分区管理，便于维护和迭代。

以上路由虽然添加了权限码，但是并没有做静态路由和动态路由的区分，如果项目需要进行权限判断时，只需要对分区路由文件进行区分，比如静态路由分区文件以 .crouter.js 结尾，动态路由分区文件以 .arouter.js 结尾，在主路由中引入分区路由文件时，分两次执行 importAll() 方法，只需要修改两次执行时的正则就可以分别导入两种路由。

在需要频繁 import 的情况下，可以尝试合理使用该方法！

三. Vue-Cli 3 引入 SCSS 全局变量

1.首先创建一个全局变量文件 global.scss

$theme-color: #efefef;

2.配置 vue.config.js

module.exports = {
// ...
  css: {
loaderOptions: {
sass: {
data: `@import "@/styles/global.scss";`
      }
    }
  }
}

现在就可以在任意地方使用global.scss中定义的变量了，这么做的目的主要是为了一些主题样式的全局配置，例如主体背景颜色、全局默认字体大小、颜色等等。

四. vue-cli2 打包开启 gzip 压缩

1.安装打包插件：compression-webpack-plugin

这里使用 npm 安装：npm install --save-dev compression-webpack-plugin@1.1.12

因为vue-cli2使用的是webpack3.0+，但是最新版的compression-webpack-plugin需要 webpack4.0+才能支持，所以这边安装插件的时候，需要指定一个低版本号，防止兼容问题发生。

2.安装好之后，修改 config 文件夹下的 index.js 配置文件

将 productionGzip: false 改为 true

3. 添加css文件压缩配置

不进行这一步的情况下，已经可以正常打包，并且将大文件压缩成 gz 文件，但是因为vue-cli自带的webpack.prod.config配置没有对css文件进行匹配，所以如果需要css文件进行压缩的话，就要修改build文件夹下的正则匹配。

修改为

4.运行 npm run build 进行打包

会将大小大于 10kb 的文件进行压缩，生成 gz 结尾的静态文件

5.最后一步，上传到服务器之后，nginx 需要进行配置，配置文件如下

接下来就可以愉快地访问啦！

五. vue-cli3 打包开启 gzip 压缩

   1.安装打包插件：compression-webpack-plugin

    这里使用 npm 安装：npm install --save-dev compression-webpack-plugin

   2.修改 vue.config.js 配置

3.运行 npm run build 进行打包

打包完之后可以看到，打包文件生成了 gz 结尾的压缩文件

4.同上修改 nginx 服务器配置，就可以愉快地访问啦～

如果能对你有帮助，便是它最大的价值。都看到这里还不点赞，太过不去啦