Is company management background, now I through the vue – before the cli to build, of course, 😆 steps is very simple, is the business going to do at that time, outsourcing (was), I as a code of the porters, of course the choice of the front-end industry extremely hot vue frame at the time, have to say, Utah still gave People xiaobai a path that is not rough.

After the completion of a building, I wrote a part of the page, but because of small procedures, the public, with company’s business, will be another moves a front end to replace my present work, the company’s management background of mainly statements, business direction is, FMCG industry may have at least two reports an activity, and is not the same field, This leads to more than 90 routing links (rough calculation), but at that time in order to optimize, routing is lazy loading way, resulting in the result is that every time change a thing hot update takes about 20 seconds,

The author’s computer is a Mac Pro with a 13-inch high configuration, which is relatively ok. Another colleague’s Windows is directly in the 80s

After checking a lot of information, I found a big bull on the Internet to solve the problem (there are still many good people willing to solve the problem for you). Now I write here to make a note for myself.

Create two JS files under the router file, _import_development.js and _import_production.js, as shown in the figure below:

The contents of _import_development.js are

module.exports = file => require('@/views/' + file + '.vue').default

The contents of _import_production.js are

module.exports = file => () => import('@/views/' + file + '.vue')

Index. Jsli, here is an example

const _import = require('./_import_' + process.env.NODE_ENV);

export const routers = [
    {
        path: '/',
        name: 'login',
        meta: { 
            title: 'login'
        },
        component: _import('login')},]Copy the code

So when you run NPM run dev locally,

process.env.NODE_ENV === 'development'
Copy the code

You can do this in the dev. Env.js file under config

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"'
})
Copy the code

Or write commands in the scripts option of package.json

"scripts": {
    "build": "cross-env NODE_ENV=production node build/build.js",},Copy the code

After this method is processed, I heat update about 1-2s each time, greatly improving work efficiency

Front-end now to learn a lot of things, mutual encouragement!!