快捷導(dǎo)航

Vue項(xiàng)目打包編譯優(yōu)化方案

更新時間：2020年09月16日 09:33:34 作者：文淵

當(dāng)一個較復(fù)雜的vue項(xiàng)目打包后，文件會非常大，而且訪問時資源加載速度很慢，本文介紹了幾種措施來優(yōu)化。

1. 不生成.map文件

　　默認(rèn)情況下，當(dāng)我們執(zhí)行 npm run build 命令打包完一個項(xiàng)目后，會得到一個dist目錄，里面有一個js目錄，存放了該項(xiàng)目編譯后的所有js文件。
　　我們發(fā)現(xiàn)每個js文件都有一個相應(yīng)的 .map 文件，它們僅是用來調(diào)試代碼的，可以加快打包速度，但會增大打包體積，線上我們是不需要這個代碼的。這里我們需要配置不生成map文件。

vue-cli2

　　config/index.js文件中，找到 productionSourceMap: true 這一行，將 true 改為 false。

vue-cli3

　　在 vue.config.js 中編寫以下內(nèi)容：

module.exports = {
 productionSourceMap: false
}

2. 按需引入第三方包

　　默認(rèn)情況下，在打包完后的js文件中，vendor.xxx.js 這個文件是非常大的，它主要是我們用到的第三方包（vue、vue-router、vuex、axios、element-ui等等）。這里面的大部分是我們要用到的功能，而像 element-ui 這種，明顯可以按塊來分，我們只是用到了里面的個別組件，完全可以把它按需取出，沒必要全部打包。

　　在 element-ui 的官網(wǎng)，介紹了按需引入的方法，借助 babel-plugin-component，我們可以只引入需要的組件，以達(dá)到減小項(xiàng)目體積的目的。

3. 路由懶加載

　　默認(rèn)情況下，在打包完后的js文件中，app.xxx.js 這個文件是非常大的，它主要是我們編寫的一些組件。那么無法避免的問題就是：當(dāng)用戶訪問網(wǎng)頁的時候，第一次的請求要加載整個 app.xxx.js，當(dāng)我們的項(xiàng)目比較復(fù)雜的時候，這個文件也是相當(dāng)大的。

　　接下來我們要做的，就是路由懶加載。也就是當(dāng)訪問一個頁面的時候，只加載當(dāng)前組件相關(guān)的js資源，訪問其它頁面的時候，再加載相應(yīng)的組件代碼。

　　通過vue提供的路由懶加載功能，我們能將原來的一個 app.xxx.js 文件，分塊分成多個。

　?、?首先根據(jù)官網(wǎng)的說明，我們需要安裝一個插件

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

　?、?然后在 babel.config.js 中配置如下內(nèi)容（網(wǎng)上說的是 .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
 }
 ]
});

　　更細(xì)節(jié)的內(nèi)容參見官方文檔

以上就是Vue項(xiàng)目打包編譯優(yōu)化方案的詳細(xì)內(nèi)容，更多關(guān)于vue項(xiàng)目打包優(yōu)化的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: