公司现在目前的项目,是我之前通过vue-clic来构建的,当然这个的步骤也是极其简单的,当时这块也是公司准备重做业务,拆分项目里会员的身份为多端项目,作为一个代码的搬运工,理所当然的选择了当下及其火热的Vue框架,还是要感谢一下尤大大给国人小白前端一条不是那么坎坷的道路。
在构建完成后,我写了一部分的页面,但是由于还要兼顾公司的小程序,公众号方面的业务,就给了另一个前端来接替我现在的工作,由于业务的繁多,也就自然而然的页面繁多,这就导致了路由就百来个(粗略估计),之前那时为了优化, 路由使用的懒加载的方式,造成的结果也可想而知,开发环境下,每改一个东西热更新都要20s左右。
笔者的电脑是 Mac Pro 13寸的高配,配置相对来说还可以,另一个同事的windows,直接就是80s
之前查了很多资料没有得到解决,随后在网上找了一位大牛解决了这个问题(还是有很多厉害的人愿意为你解决问题),现在写到这里给自己做一个笔记, 在router文件下面创立两个js文件,分别为_import_development.js和_import_production.js,如图:
_import_development.js里面的内容为
module.exports = file => require('@/views/' + file + '.vue').default
_import_production.js里面的内容为
module.exports = file => () => import('@/views/' + file + '.vue')
ndex.jsli里面稍作改造,这边举一个例子
const _import = require('./_import_' + process.env.NODE_ENV);
export const routers = [
{
path: '/',
name: 'login',
meta: {
title: '登录'
},
component: _import('login')
},
]
这样当你本地 执行命令 npm run dev的时候,
process.env.NODE_ENV === 'development'
你可以在config文件下面的dev.env.js里面进行设置
var merge = require('webpack-merge')
var prodEnv = require('./prod.env')
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
ENV_CONFIG: '"dev"',
BASE_API: '"https://api-dev"'
})
或者在package.json里面的scripts选项中书写命令
"scripts": {
"build": "cross-env NODE_ENV=production node build/build.js",
},
这种方法处理之后,我每次热更新1-2s左右,极大地提高了工作效率
总结不易,有帮助还希望点个赞😄