Vue (element-ui) project optimization

Project optimization-progress bar added

• Install nprogress, the ui interface depends on installation dependencies, just search for nprogress to install

• Import the progress bar component in main

  //Import the progress bar plugin 
  import NProgress from'nprogress' 
  //Import the progress bar style 
  import'nprogress/nprogress.css'

• Use NProgress.start() to display the progress bar

  NProgress.start()

• Use NProgress.done() to hide the progress bar

  NProgress.done()

Remove the packaged console

• 安装babel-plugin-transform-remove-console

• Add "transform-remove-console" under the plugins node

  "plugins": [
      [
        "component",
        {
          "libraryName": "element-ui",
          "styleLibraryName": "theme-chalk"
        }
      ],
      "transform-remove-console"
    ]

Only remove the console during the release phase

• Use process.env.NODE_ENV to determine whether the current release is the development stage

  var prodPlugins = []
  ​
  if(process.env.NODE_ENV == 'production'){
    prodPlugins.push('transform-remove-console')
  }

• Use the expansion operator to pass the plugins in the array to plugins

  "plugins": [
      [
        "component",
        {
          "libraryName": "element-ui",
          "styleLibraryName": "theme-chalk"
        }
      ],
      ...prodPlugins
    ]

Use vue.config.js to modify the default configuration of webpack

• Create the vue.config.js file

• A configuration object is exposed inside js

  module.exports = {
    
  }

Custom entry file

• Use chainWebpack to configure different environments to set different entry files

  chainWebpack:config=>{ 
      // The current environment is the release stage 
      config.when(process.env.NODE_ENV =='production',config=>{ 
        config.entry('app').clear().add('./ src/main-prod.js') 
      }) 
      // The current environment is in the development stage 
      config.when(process.env.NODE_ENV =='development',config=>{ 
        config.entry('app').clear(). add('./src/main-dev.js') 
      }) 
    }

Load external resources through cdn

• Because the import file is imported into the package through import, it will eventually be packaged into the same js file, which causes the chunk-vendors file to be too large

• Since these files are packaged into the same js file, the volume is too large, so ignore some js files and not package (only need to configure the release stage)

  //Use externals to set exclusions 
  config.set('externals',{ 
    vue:'Vue', 
    'vue-router':'VueRouter', 
    axios:'axios', 
    echarts:'echarts', 
    nprogress:'NProgress', 
    'vue-quill-editor':'VueQuillEditor' 
  })

• Although some js files are ignored, there are still some css files in the entry file that are relatively large, so directly delete the imported css

  import VueQuillEditor from'vue-quill-editor' 
  // Rich text editor 
  import'quill/dist/quill.core.css 
  ' import'quill/dist/quill.snow.css 
  ' import'quill/dist/quill.bubble. css'

• After deleting the above css without packaging, the final style will definitely be problematic, so we introduce the resource file of cdn in index.html in public

  <!-- Stylesheet file of nprogress--> 
  <link rel="stylesheet" href="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.css"/> 
  <!-- Style sheet file for rich text editor --> 
  <link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.core.min.css" /> 
  <link rel ="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.snow.min.css" /> 
  <link rel="stylesheet" href="https://cdn.staticfile .org/quill/1.3.4/quill.bubble.min.css" />

• We also ignore that the corresponding js file is not packaged, so we also directly introduce cdn resources in index.html in public

  <script src="https://cdn.staticfile.org/vue/2.5.22/vue.min.js"></script>
  <script src="https://cdn.staticfile.org/vue-router/3.0.1/vue-router.min.js"></script>
  <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
  <script src="https://cdn.staticfile.org/echarts/4.1.0/echarts.min.js"></script>
  <script src="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.js"></script>
  <!-- 富文本编辑器的 js 文件 -->
  <script src="https://cdn.staticfile.org/quill/1.3.4/quill.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-quill-editor.js"></script>

Configure the cdn resource of element-ui

• Delete the elemen.js imported on demand in the entry file

• Import the cdn resource of the element

  <!-- The stylesheet file of element-ui--> 
  <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.13.0/theme-chalk/index.css" /> 
  <!-- js file of element-ui--> 
  <script src="https://cdn.staticfile.org/element-ui/2.13.0/index.js"></script>

Customize different homepage content according to different environments

We need to determine whether the current environment is the development stage or the release stage in index.html, but process.env.NODE_ENV cannot be obtained in index.html, but the configuration data of the htmlWebpackPlugin plug-in can be obtained in index.html.

why?

• The first function gets index.html and generates a new index.html

• The packaged js and css files will be automatically introduced

• If it is the publishing stage, we add a flag to htmlWebpackPlugin as true

  //Use the plug-in 
  config.plugin('html').tap(args=>{ 
    //Add parameter isProd 
    args[0].isProd = true 
    return args 
  })

• If it is in the development stage, add a logo, which is flase

  //Use the plug-in 
  config.plugin('html').tap(args=>{ 
    //Add parameter isProd 
    args[0].isProd = false 
    return args 
  })

• Obtain the logo through htmlWebpackPlugin on the page, and judge whether the logo is true or false. If it is true, it means the release stage, you should add the cdn resource, if it is false, you don’t need to add it.

  <% if(htmlWebpackPlugin.options.isProd){ %> cdn 
  resource file 
   <%} %>

Implement routing lazy loading

Also known as: routing on-demand loading

When a route is matched, the corresponding resource file is loaded

• 安装 @babel/plugin-syntax-dynamic-import

• Configure babel-plugins

  "plugins": [
      [
        "component",
        {
          "libraryName": "element-ui",
          "styleLibraryName": "theme-chalk"
        }
      ],
      ...prodPlugins,
      "@babel/plugin-syntax-dynamic-import"
    ]

• Modify the introduction method

  // Login page 
  const Login = () => import(/* webpackChunkName: "login" */'../components/Login.vue') 
  // Home page 
  const Home = () => import(/* webpackChunkName: " HomeWelcome" */'../components/Home.vue') 
  const Welcome = () => import(/* webpackChunkName: "HomeWelcome" */'../components/Welcome.vue') 
  // User list 
  const User = () => import(/* webpackChunkName: "user" */'../components/user/Users.vue') 
  // Rights management 
  const Rights = () => import(/* webpackChunkName: "Rights" * /'../components/power/Rights.vue') 
  const Roles = () => import(/* webpackChunkName: "Rights" */'../components/power/Roles.vue') 
  // Commodity management 
  const Categories = () => import(/* webpackChunkName: "goods" */'../components/goods/Categories.vue') 
  const Params = () => import(/* webpackChunkName: "goods" */'../components/goods/Params.vue')
  const Goods = () => import(/* webpackChunkName: "goods" */ '../components/goods/Goods.vue')
  const GoodsAdd = () => import(/* webpackChunkName: "goods" */ '../components/goods/GoodsAdd.vue')
  // 订单管理
  const Orders = () => import(/* webpackChunkName: "goods" */ '../components/orders/Orders.vue')
  // 数据管理
  const Reports = () => import(/* webpackChunkName: "goods" */ '../components/Reports.vue')