Optimization Scheme of Packaging and Compiling for Vue Project

1. Do not generate. map files

By default, when we execute the npm run build After packing a project with the command, you will get an dist directory with an js directory that stores all the js files compiled by the project.
We found that each js file has a corresponding. map file, which is only used to debug the code, which can speed up the packaging speed, but will increase the packaging volume, so we don't need this code online. Here we need to configure not to generate map files.

vue-cli2

In the config/index. js file, find line productionSourceMap: true and change true to false.

vue-cli3

Write the following in vue. config. js:

module.exports = {
 productionSourceMap: false
}

2. Introduce the third package as needed

By default, in the packaged js file, vendor. xxx. js is very large, which is mainly the third package we use (vue, vue-router, vuex, axios, element-ui, etc.). Most of them are the functions we want to use, but like element-ui, they can obviously be divided into blocks. We only use individual components inside, so we can take them out as needed, and there is no need to package them all.

In the official website of element-ui, the method of on-demand introduction is introduced. With babel-plugin-component, we can only introduce the required components to reduce the project volume.

3. Lazy route loading

By default, in the packaged js file, the file app. xxx. js is very large, and it is mainly a few components that we wrote. Then the unavoidable problem is that when the user visits the web page, the first request will load the whole app. xxx. js, which is quite large when our project is complicated.

The next thing we have to do is to load the route lazily. That is to say, when visiting one page, only the js resources related to the current component are loaded, and when visiting other pages, the corresponding component codes are loaded.

Through the route lazy loading function provided by vue, we can divide the original one app. xxx. js file into multiple blocks.

First of all, according to the instructions of official website, we need to install a plug-in

npm install --save-dev @babel/plugin-syntax-dynamic-import

② Then configure the following contents in babel. config. js (the file. babelrc is said on the Internet, which is the previous configuration format):

module.exports = {
 presets: ["@vue/app"],
 plugins: ["@babel/plugin-syntax-dynamic-import"]
};

③ Next, modify the code of the route loading component.

This is our original route writing:

router.js

import Vue from "vue";
import Router from "vue-router";

import Home from "./views/Home.vue";
import About from "./views/About.vue";
import Form from "./views/Form.vue";
import Table from "./views/Table.vue";
import NavMenu from "./views/NavMenu.vue";

Vue.use(Router);

export default new Router({
 mode: "history",
 base: process.env.BASE_URL,
 routes: [
 {
  path: "/",
  name: "home",
  component: Home
 },
 {
  path: "/about",
  name: "about",
  component: About
 },
 {
  path: "/form",
  name: "myForm",
  component: Form
 },
 {
  path: "/table",
  name: "myTable",
  component: Table
 },
 {
  path: "/nav_menu",
  name: "myNavMenu",
  component: NavMenu
 }
 ]
});

This is the route writing we modified:

router.js

import Vue from "vue";
import Router from "vue-router";

const Home = () => import("./views/Home.vue");
const About = () => import("./views/About.vue");
const Form = () => import("./views/Form.vue");
const Table = () => import("./views/Table.vue");
const NavMenu = () => import("./views/NavMenu.vue");

Vue.use(Router);

export default new Router({
 mode: "history",
 base: process.env.BASE_URL,
 routes: [
 {
  path: "/",
  name: "home",
  component: Home
 },
 {
  path: "/about",
  name: "about",
  component: About
 },
 {
  path: "/form",
  name: "myForm",
  component: Form
 },
 {
  path: "/table",
  name: "myTable",
  component: Table
 },
 {
  path: "/nav_menu",
  name: "myNavMenu",
  component: NavMenu
 }
 ]
});

See the official document for more details

The above is the Vue Project Packaging Compilation Optimization Program details, more about the vue Project Packaging Optimization information please pay attention to other related articles on this site!