Vue项目打包编译优化

当一个较复杂的vue项目打包后,文件会非常大,而且访问时资源加载速度很慢,所以采取了几种措施来优化。

1. 不生成.map文件

  默认情况下,当我们执行 npm run build 命令打包完一个项目后,会得到一个dist目录,里面有一个js目录,存放了该项目编译后的所有js文件。
  我们发现每个js文件都有一个相应的 .map 文件,它们仅是用来调试代码的,可以加快打包速度,但会增大打包体积,线上我们是不需要这个代码的。这里我们需要配置不生成map文件

  vue-cli2
  config/index.js文件中,找到 productionSourceMap: true 这一行,将 true 改为 false。

  vue-cli3
  在 vue.config.js 中编写以下内容:

module.exports = {
  productionSourceMap: false
}

2. 按需引入第三方包

  默认情况下,在打包完后的js文件中,vendor.xxx.js 这个文件是非常大的,它主要是我们用到的第三方包(vue、vue-router、vuex、axios、element-ui等等)。这里面的大部分是我们要用到的功能,而像 element-ui 这种,明显可以按块来分,我们只是用到了里面的个别组件,完全可以把它按需取出,没必要全部打包。

  在 element-ui 的官网,介绍了按需引入的方法,借助 babel-plugin-component,我们可以只引入需要的组件,以达到减小项目体积的目的。

3. 路由懒加载

  默认情况下,在打包完后的js文件中,app.xxx.js 这个文件是非常大的,它主要是我们编写的一些组件。那么无法避免的问题就是:当用户访问网页的时候,第一次的请求要加载整个 app.xxx.js,当我们的项目比较复杂的时候,这个文件也是相当大的。

  接下来我们要做的,就是路由懒加载。也就是当访问一个页面的时候,只加载当前组件相关的js资源,访问其它页面的时候,再加载相应的组件代码。

  通过vue提供的路由懒加载功能,我们能将原来的一个 app.xxx.js 文件,分块分成多个。

  ① 首先根据官网的说明,我们需要安装一个插件

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

  ② 然后在 babel.config.js 中配置如下内容(网上说的是 .babelrc 文件,这是以前的配置格式):

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

  ③ 接下来修改路由加载组件部分的代码。
  这是我们原来的路由写法:
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
    }
  ]
});

  这是我们修改完的路由写法:
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
    }
  ]
});

  更细节的内容参见官方文档


参考
https://router.vuejs.org/zh/guide/advanced/lazy-loading.html


  目录