2022년 Vue 앱 아키텍처에 대한 권장 사항

Mastering JS에서 우리는 실용적인 웹 개발에 관한 것입니다. 즉, 새로운 기능을 제공하는 것과 관련되지 않은 작업은 적극적으로 피합니다. 우리는 지출at most 1 hour per quarter on build system work을 믿으므로 자전거 타기Webpack configs에 시간을 낭비하지 않거나 "국가 관리"에 대해 논의하지 않습니다(더 이상 문제가 됩니까?).

즉, 우리는 v-if 및 v-bind 문을 작성하는 데 대부분의 칼로리를 소비하고 빌드를 수정하지 않습니다.

개요

모든 것은 일반적으로 Netlify에서 호스팅하는 index.html 파일로 시작합니다. index.html 파일에는 아래 body가 포함되어 있습니다.

  <body>
    <div id="content"></div>

    <script src="https://unpkg.com/[email protected]"></script>
    <script src="https://unpkg.com/[email protected]"></script>
    <script src="/bundle.js"></script>
  </body>

직접 번들로 묶지 않으려면 Vue from a CDN을 로드하는 것이 좋습니다. Vue Router 과 동일합니다. 왜요? 우리는 SEO 중심 페이지에 Vue를 두지 않기 때문에 트리 쉐이킹은 우리에게 가치가 없습니다. Google에서 페이지의 순위를 매기려면 Vue에 관한 페이지이고 대화형 예제가 필요한 경우가 아니면 바닐라 JS를 사용합니다.

번들에는 대부분의 다른 종속성이 포함되어 있으므로 Webpack을 사용하여 번들을 빌드합니다.

웹팩 구성

아래는 Vue 프로젝트를 위한 표준 Webpack 구성입니다.

const config = require('./.config');
const webpack = require('webpack');

module.exports = {
  mode: 'development',
  entry: {
    app: `${__dirname}/src/main.js`
  },
  target: 'web',
  output: {
    path: `${__dirname}/public`,
    filename: 'bundle.js'
  },
  optimization: {
    minimize: false // <-- Remove need for source maps
  },
  plugins: [
    // Allow accessing config
    ...Object.keys(config).map(key => {
      return new webpack.DefinePlugin({ [`__${key}`]: config[key] });
    })
  ],
  module: {
    rules: [
      {
        test: /\.html$/i, // <-- Allow `require()` on HTML files
        type: 'asset/source'
      },
      {
        test: /\.css$/i, // <-- Allow `require()` on CSS files
        type: 'asset/source'
      }
    ]
  }
};

이 구성에 대해 주목할 가치가 있는 3가지 사항:

프로덕션에서 축소를 비활성화합니다. 다시 말하지만 축소의 성능 이점은 우리의 경우에 너무 무시할 수 있으므로 개발자가 소스 맵 등을 설정하는 데 시간을 할애할 가치가 없습니다. 축소가 의미 있는 성능 이점을 제공한다면 이는 너무 많은 JavaScript를 제공하고 있다는 의미입니다. 앱을 수정하세요.

plugins을 사용하여 구성을 가져옵니다.

type: 'asset/source' 를 사용하여 HTML 및 CSS를 문자열로 가져옵니다.

HTML 및 CSS를 문자열로 가져오는 이유는 무엇입니까? 따라서 .html 및 .css 파일에서 구성 요소에 대한 HTML 및 CSS를 정의할 수 있습니다. 예를 들어, 아래는 footer/index.js 파일입니다.

'use strict';

const appendCSS = require('../appendCSS');
const css = require('./footer.css');
const template = require('./footer.html');

appendCSS(css);

module.exports = app => app.component('footer-component', {
  template: template
});

이는 모든 레이아웃 작업이 HTML 및 CSS에서 수행됨을 의미합니다. 실제로 JavaScript를 만질 필요가 없습니다. 이것은 우리가 새로운 레이아웃 작업의 대부분을 Fiverr 또는 유사한 서비스의 디자이너에게 위임할 수 있다는 것을 의미하기 때문에 우리에게 큰 승리입니다. 그들은 우리에게 완전한 레이아웃을 보내고 우리는 그것을 구성 요소에 넣습니다.

상태

상태 관리는 Vue에서 크게 문제가 되지 않습니다. 프론트엔드 개발자들은 상태 관리에 대해 무한히 논의하는 경향이 있는데, 이는 ES6 이전의 JavaScript용으로 작성되고 절망적으로 구식인 React와 같은 프레임워크에서 큰 문제이기 때문입니다.

우리에게 최상위 페이지 구성 요소(Vue 라우터에 전달하는 구성 요소)는 상태 설정 및 데이터 가져오기를 담당합니다. 소품 드릴링을 방지하기 위해 Vue's provide option 을 사용하여 상태를 전달합니다.

Reference

이 문제에 관하여(2022년 Vue 앱 아키텍처에 대한 권장 사항), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/masteringjs/our-recommendations-for-vue-app-architecture-in-2022-5604

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

2022년 Vue 앱 아키텍처에 대한 권장 사항

개요

웹팩 구성

상태

Reference

좋은 웹페이지 즐겨찾기