Some optimization strategies Vue project

Vue after the completion of the project from the development environment turn into a production environment

Some third-party packages too large, leading to generate js file is too large, it is time to pack can generate reports to see if the problem project

1. There are two ways to generate reports a use npm run build --report

2. Another panel visualized using ui vue scaffolding vue input ui in the project

 

 

 3. Click the Run button in a production environment, you can see the package out of the js file a total of as much as 2M, js / chunk-vendors.js is dependent on a number of project files,

And then on the right you can see the element-ui and echarts and rich text editor, tree Spreadsheet Add these dependencies maximum volume, then we can do for these optimization

 

4. Copy the file named main.js two main-dev.js and main-prod.js, representing the development and production environments

Modify the default configuration webpack by vue.config.js, specify a different packaging and publishing model for the development of entry mode

module.exports = {
  lintOnSave: false,
  chainWebpack: config => {
    //   发布模式
    config.when(process.env.NODE_ENV === 'production', config => {
      config.entry('app').clear().add('./src/main-prod.js')
    })
    // 开发模式
    config.when(process.env.NODE_ENV === 'development', config => {
      config.entry('app').clear().add('./src/main-dev.js')
    })
  }
}

5. default import syntax introduced by a third party dependencies, will eventually be merged into the same package file, resulting in the success of the packaging, single-file size is too large.

To solve this problem, by externals of nodes webpack to configure and load the external CDN resources. Those who declare dependencies in the externals of third parties, will not be packaged.

module.exports = {
  lintOnSave: false,
  chainWebpack: config => {
    //   发布模式
    config.when(process.env.NODE_ENV === 'production', config => {
      config.entry('app').clear().add('./src/main-prod.js')
      config.set('externals', {
        vue: 'Vue',
        axios: 'axios',
        lodash: '_',
        echarts: 'echarts',
        nprogress: 'NProgress',
        'vue-quill-editor': 'VueQuillEditor'
      })
      config.plugin('html').tap(args => {
        args[0].= to true isProd 
    // development model
    })
      })
        return args
    config.when(process.env.NODE_ENV === 'development', config => {
      console.log(config);
      config.entry('app').clear().add('./src/main-dev.js')
      config.plugin('html').tap(args => {
        args[0].isProd = false
        return args
      })
    })
  }
}

6. while index.html file in the public directory, the introduction of these third parties file a CDN dependencies

 

 

 Packaged compilation, repackaging can see out into a 200K file from the original 2M

 

 

 

7. routes may then be lazy loading, installing @ babel / plugin-syntax-dynamic-import-dependent

(On a plug-transform-remove-console role is to clear all console.log in a production environment)

const prodPlugins = []
if (process.env.NODE_ENV === 'production') {
  prodPlugins.push('transform-remove-console')
}
module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    [
      'component',
      {
        libraryName: 'element-ui',
        styleLibraryName: 'theme-chalk'
      }
    ],
    ...prodPlugins,
    '@babel/plugin-syntax-dynamic-import'
  ]
}

Plug-in is using the method can refer to the official documentation of vue-router

https://router.vuejs.org/zh/guide/advanced/lazy-loading.html#%E6%8A%8A%E7%BB%84%E4%BB%B6%E6%8C%89%E7%BB%84%E5%88%86%E5%9D%97　

const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')

Transformation router file

import Vue from 'vue'
import VueRouter from 'vue-router'
// import Login from '../components/Login.vue'
const Login = () => import( /* webpackChunkName: "login_home_welcome" */ '../components/Login.vue')
// import Home from '../components/Home.vue'
const Home = () => import( /* webpackChunkName: "login_home_welcome" */ '../components/Home.vue')
// import Welcome from '../components/Welcome.vue'
const Welcome = () => import( /* webpackChunkName: "login_home_welcome" */ '../components/Welcome.vue')

// import Users from '../components/user/Users.vue'
const Users = () => import( /* webpackChunkName: "Users_Rights_Roles" */ '../components/user/Users.vue')
// import Rights from '../components/power/Right.vue'
const Rights = () => import( /* webpackChunkName: "Users_Rights_Roles" */ '../components/power/Right.vue')
// import Roles from '../components/power/Roles.vue'
const Roles = () => import( /* webpackChunkName: "Users_Rights_Roles" */ '../components/power/Roles.vue')

// import Cate from '../components/goods/Cate.vue'
const Cate = () => import( /* webpackChunkName: "Cate_Params" */ '../components/goods/Cate.vue')
// import Params from '../components/goods/Params.vue'
const Params = () => import( /* webpackChunkName: "Cate_Params" */ '../components/goods/Params.vue')

// import GoodsList from '../components/goods/List.vue'
const GoodsList = () => import( /* webpackChunkName: "GoodsList_Add" */ '../components/goods/List.vue')
// import Add from '../components/goods/Add.vue'
const Add = () => import( /* webpackChunkName: "GoodsList_Add" */ '../components/goods/Add.vue')

// import Order from '../components/order/Order.vue'
const Order = () => import( /* webpackChunkName: "Order_Report" */ '../components/order/Order.vue')
// import Report from '../components/report/Report.vue'
const Report = () => import( /* webpackChunkName: "Order_Report" */ '../components/report/Report.vue')