Vue 프로젝트 패키지 컴파일 최적화 방안

1. 생성되지 않습니다.맵 파일
기본적으로 우리가 실행할 때npm run build 프로젝트를 포장한 후dist 디렉터리를 얻을 수 있습니다. 그 안에 js 디렉터리가 있습니다. 이 프로젝트가 컴파일된 모든 js 파일을 저장합니다.
우리는 모든 js 파일에 상응하는 것이 있다는 것을 발견했다.맵 파일은 코드를 디버깅하는 데만 사용되며, 패키지 속도를 높일 수 있지만, 패키지 부피를 증가시킬 수 있습니다. 온라인에서 우리는 이 코드를 필요로 하지 않습니다.맵 파일을 생성하지 않도록 설정해야 합니다.

vue-cli2

　　config/index.js 파일에서 productionSourceMap:true 줄을 찾으면true를false로 변경합니다.

vue-cli3

vue.config.js에서 다음을 작성합니다.

module.exports = {
 productionSourceMap: false
}

2. 필요에 따라 타사 패키지 도입
기본적으로 포장이 끝난 js 파일에서vendor.xxx.js라는 파일은 매우 크다. 이것은 주로 우리가 사용하는 제3자 패키지 (vue, vue-router, vuex,axios,element-ui 등) 이다.이 안의 대부분은 우리가 사용해야 할 기능이다. 예를 들어element-ui와 같이 블록에 따라 구분할 수 있다. 우리는 단지 안의 개별 구성 요소를 사용했을 뿐이다. 완전히 그것을 필요에 따라 꺼낼 수 있고 전부 포장할 필요가 없다.
element-ui의 홈페이지에서 수요에 따라 도입하는 방법을 소개했고babel-plugin-component를 빌려 우리는 필요한 구성 요소만 도입하여 프로젝트의 부피를 줄이는 목적을 달성할 수 있다.
3. 라우팅 게으름
기본적으로 포장이 끝난 js 파일에서 app.xxx.js라는 파일은 매우 크다. 이것은 주로 우리가 작성한 일부 구성 요소이다.그러면 피할 수 없는 문제는 사용자가 웹 페이지를 방문할 때 첫 번째 요청은 전체 앱을 불러오는 것입니다.xxx.js, 우리의 프로젝트가 비교적 복잡할 때 이 파일도 상당히 크다.
다음에 우리가 해야 할 일은 게으름이 짐을 싣는 것이다.즉, 한 페이지에 접근할 때 현재 구성 요소와 관련된 js 자원만 불러오고 다른 페이지에 접근할 때 해당하는 구성 요소 코드를 불러옵니다.
vue가 제공하는 루트 로드 기능을 통해 우리는 원래의 앱을 불러올 수 있습니다.xxx.js 파일, 블록을 여러 개로 나눈다.
① 우선 홈페이지의 설명에 따라 플러그인을 설치해야 합니다

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

② 그리고 바벨에서.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
 }
 ]
});

더 자세한 내용은 참고하시오공식 문서
이상은 바로 Vue 프로젝트 패키지 컴파일링 최적화 방안의 상세한 내용입니다. vue 프로젝트 패키지 최적화에 관한 더 많은 자료는 저희 다른 관련 글을 주목해 주십시오!