신속한 CSS 구축

12040 단어

신속한 CSS 구축


미풍 CSS 후기 구축 시간을 최적화하여 로컬 개발 및 열 모듈을 교체하거나 실시간으로 주문서를 다시 불러오는 자성을 더욱 빠르게 하는 방법을 알아보십시오!


앤드류 웰치/nystudio107

Tail­wind CSS는 우리가 7년 동안 사용한 실용적인 첫 번째 CSS 프레임워크로 매우 아름답다.우리가 처음 이야기한 것은 2017년Tail­wind CSS util­i­ty-first CSS with Adam Wathan의 dev​Mode​.fm집이다!
우리는 모든 프로젝트를 토대로 본고에서 기술한 웹 패키지 구축 과정의 일부분으로 그것을 사용한다.
우리가 최근에 겪은 문제는 로컬 개발에서 구축 시간이 매우 느릴 수 있다는 것이다. 로컬 개발에서 당신이 진정으로 원하는 것은 사이트 CSS를 구축할 때의 속도이다.
이 글은 당신의 미풍 CSS 구축 과정을 어떻게 최적화하고 당신의 hot mod­ule replace­ment/실시간 재부팅을 다시 빠르게 하며 엔진 덮개 아래에서 무슨 일이 일어났는지 설명할 것입니다.
그럼 우리 잠수하자!

문제를 해결하다


내가 만난 문제는 내 사진 한 장이 간단하게 편집되었다는 것이다.CSS를 재구성하면 pcss 파일이 10초 이상 지연됩니다.
Grant ed, Tail wind CSS에 대한 귀여운 점 중 하나는 사용자 정의 CSS를 너무 많이 쓰지 않아도 된다는 것이다.대부분의 경우 태그에 실용 클래스를 넣습니다.
그러나 사용자 정의 CSS를 추가하고 싶을 때 이렇게 고통스러워서는 안 된다
따라서 만약에 제가 웹 패키지 열 모듈 교체에서 즉각적인 피드백을 하는 것이 아니라 특수한 CSS 클래스의 배경열을 바꾸는 것을 하고 싶다면 저는 그것을 다시 컴파일하기를 기다릴 것입니다.
나는 Tail­wind CSS issue #2544 를 썼고, 가장 작은 GitHub 리셋 nys­tu­dio107/­tail­wind-css-per­for­mance 을 만들어서 그것을 다시 소개했다.
그러나 나중에 나는 이런 상황에 대처할 방법을 찾을 수 있는지 깊이 연구하기 시작했다.
나는 즉시 나의 구축 시간을 가속화할 수 있고 너도 그것을 사용할 수 있는 기술을 발견했다.

문제 설정


나의 초기 기지 후미풍 CSS 설정은 대체로 다음과 같다.

css
├── app.pcss
├── components
│ ├── global.pcss
│ ├── typography.pcss
│ └── webfonts.pcss
├── pages
│ └── homepage.pcss
└── vendor.pcss
그중에서 가장 중요한 것은 응용 프로그램이다.css, 다음과 같습니다.

/**
 * app.css
 *
 * The entry point for the css.
 *
 */

/**
 * This injects Tailwind's base styles, which is a combination of
 * Normalize.css and some additional base styles.
 */
 @import "tailwindcss/base";

/**
 * This injects any component classes registered by plugins.
 *
 */
@import 'tailwindcss/components';

/**
 * Here we add custom component classes; stuff we want loaded
 * *before* the utilities so that the utilities can still
 * override them.
 *
 */
@import './components/global.pcss';
@import './components/typography.pcss';
@import './components/webfonts.pcss';

/**
 * This injects all of Tailwind's utility classes, generated based on your
 * config file.
 *
 */
@import 'tailwindcss/utilities';

/**
 * Include styles for individual pages
 *
 */
@import './pages/homepage.pcss';

/**
 * Include vendor css.
 *
 */
 @import 'vendor.pcss';
이 응용 프로그램.그리고 pcss 파일을 응용 프로그램에 가져옵니다.ts 통과:

// Import our CSS
import '../css/app.pcss';
이것은 웹팩으로 하여금 이 점을 깨닫게 할 것이다. 그러므로.PCS는 구축 파이프에 당겨져 처리됩니다.
그리고 제 우편 번호입니다.구성js 파일은 다음과 같습니다.

module.exports = {
    plugins: [
        require('postcss-import')({
            plugins: [
            ],
            path: ['./node_modules'],
        }),
        require('tailwindcss')('./tailwind.config.js'),
        require('postcss-preset-env')({
            autoprefixer: { },
            features: {
                'nesting-rules': true
            }
        })
    ]
};
우리는 매우 표준적인 순풍이 있다.구성js 파일:

module.exports = {
  theme: {
    // Extend the default Tailwind config here
    extend: {
    },
    // Replace the default Tailwind config here
  },
  corePlugins: {},
  plugins: [],
};

문제


위의 설정은 Using with Pre­proces­sors: PostC­SS as your pre­proces­sor 의 뒷바람 CSS 문서 부분과 매우 비슷합니다.
Tail-wind CSS는 PostC­SS를 사용하여 구축된 것이기 때문에 구축된 체인을 web­pack 또는 Lar­avel Mix (엔진 뚜껑 아래에서 웹 패키지를 사용) 또는 Gulp 사용한다면 Post-SS를 사용할 수도 있습니다.
이 파일은 postc­ss-importplu-in을 사용하고 있다면 다음과 같이 변경하는 것이 좋습니다.

@tailwind base;
@import "./custom-base-styles.css";

@tailwind components;
@import "./custom-components.css";

@tailwind utilities;
@import "./custom-utilities.css";
다음을 수행합니다.

@import "tailwindcss/base";
@import "./custom-base-styles.css";

@import "tailwindcss/components";
@import "./custom-components.css";

@import "tailwindcss/utilities";
@import "./custom-utilities.css";
이것은 POSTSS 가져오기가 CSS 규범을 엄격히 준수하고 파일의 맨 위에 있지 않으면 @ 가져오기 상태를 어디에나 표시하기 때문에 다른 CSS나 @tailwind 명령과 혼합할 수 없습니다.
이게 바로 일이 배 모양으로 변하기 시작한 곳이에요.
@import "tailwindcss/utilities"를 사용할 때;@ 순풍 공용사업이 아니라정말 놀라운 것은tailwindcss/utilities입니다.css 파일 가져오기:

@tailwind utilities;
따라서 POSTSS 가져오기에서 @ 가져오기 위치 요구 사항을 회피하기 위해 간접 레이어를 추가할 뿐입니다.
그러나 우리는 node\u 모듈/tailwindcss/dist/를 보고 이 차세대 파일이 얼마나 큰지 대체적으로 알 수 있다.

❯ ls -alh dist
total 43568
drwxr-xr-x 12 andrew staff 384B Sep 19 11:34 .
drwxr-xr-x 19 andrew staff 608B Sep 19 11:35 ..
-rw-r--r-- 1 andrew staff 11K Oct 26 1985 base.css
-rw-r--r-- 1 andrew staff 3.1K Oct 26 1985 base.min.css
-rw-r--r-- 1 andrew staff 1.9K Oct 26 1985 components.css
-rw-r--r-- 1 andrew staff 1.3K Oct 26 1985 components.min.css
-rw-r--r-- 1 andrew staff 5.4M Oct 26 1985 tailwind-experimental.css
-rw-r--r-- 1 andrew staff 4.3M Oct 26 1985 tailwind-experimental.min.css
-rw-r--r-- 1 andrew staff 2.3M Oct 26 1985 tailwind.css
-rw-r--r-- 1 andrew staff 1.9M Oct 26 1985 tailwind.min.css
-rw-r--r-- 1 andrew staff 2.2M Oct 26 1985 utilities.css
-rw-r--r-- 1 andrew staff 1.8M Oct 26 1985 utilities.min.css
(한마디 하자면, 자세히 보면 아담 와튼의 생일을 알게 될 거야)
우리는 공용사업을 볼 수 있다.css 파일 자체의 무게는 2.2미터에 달한다.PurgeC­SS을Tail­wind CSS docs: Con­trol­ling file size의 대체품으로 사용할 때 이 점은 생산 건설에서 구현되었지만 현지 발전에 문제가 될 수 있다.
그렇다면 왜 이것이 문제일까?하면, 만약, 만약...​’왜 이렇게 느려?
원인은 두 가지가 있다.
  • 비록 Tail-wind CSSopti­miza­tions in place가 이 작업을 완성했지만 당신의 모든 페이지가 바뀔 때마다 대량의 CSS가 생성됩니다.pcss 파일.우리는 그것들을 모두 함께 놓았기 때문에 그것들은 모두 함께 재건되었다.
  • PostCs 가져오기plu-inactu­al­ly pars­es @ 가져온 모든 파일을 가져옵니다. 가져온 파일에서 다른 @ 가져오기 상태를 찾습니다. @ 순풍 방향 발전기에서도 이 작업을 수행합니다.
    • 그리고 우리의 결과 실용 프로그램.기본적으로 css 파일은 100000줄이 넘는 css 생성과 해석이 있습니다.
    
❯ wc -l utilities.css
  102503 utilities.css
    그래서 이게 안 좋아요.

    솔루션


    그럼 저희가 뭘 할 수 있을까요?CSS를 따라가는 본질은 CSS를 대량으로 만들 수 있다는 것입니다. 이 세대는 이렇게 많은 최적화를 할 수 밖에 없습니다.
    나는 Tail-wind CSS에 추가할 수 있는 각종 캐시 메커니즘을 고려하기 시작했지만, 정확한 해결 방안은 플랫폼만 이용하는 것임을 깨달았다.
    나는 오래된 Comp-Sci 격언이 생각났다.
    가장 빠른 코드는 실행할 필요가 없는 코드입니다.
    우리는 이미 웹-pack을 사용하고 있습니다. 각종 적재기를 통해 각종 수입 상품을 능숙하게 처리할 수 있습니다. 왜 우리의 전통을 깨뜨리지 않습니까?PCS를 블록으로 분해하고 웹-pack을 분류하시겠습니까?

    솔루션 설정


    이것이 바로 내가 solu­tion branch of nys­tu­dio107/­tail­wind-css-per­for­mance 에서 한 일이다.
    이제 CSS 명령은 다음과 같습니다.
    
css
├── app-base.pcss
├── app-components.pcss
├── app-utilities.pcss
├── components
│ ├── global.pcss
│ ├── typography.pcss
│ └── webfonts.pcss
├── pages
│ └── homepage.pcss
├── tailwind-base.pcss
├── tailwind-components.pcss
├── tailwind-utilities.pcss
└── vendor.pcss
    우리의 응용 프로그램.pcss 파일이 6개월 9개월로 분해되었습니다.Tail-wind의 기초, 구성 요소 및 유틸리티 방법과 관련된 pcss 파일:
    
/**
 * This injects Tailwind's base styles, which is a combination of
 * Normalize.css and some additional base styles.
 */
@tailwind base;



/**
 * Here we add custom base styles, applied after the tailwind-base
 * classes
 *
 */



/**
 * This injects any component classes registered by plugins.
 *
 */
@tailwind components;



/**
 * Here we add custom component classes; stuff we want loaded
 * *before* the utilities so that the utilities can still
 * override them.
 *
 */
@import './components/global.pcss';
@import './components/typography.pcss';
@import './components/webfonts.pcss';



/**
 * This injects all of Tailwind's utility classes, generated based on your
 * config file.
 *
 */
@tailwind utilities;



/**
 * Include styles for individual pages
 *
 */
@import './pages/homepage.pcss';

/**
 * Include vendor css.
 *
 */
 @import 'vendor.pcss';
    그리고 이거.그리고 pcss 파일을 응용 프로그램에 가져옵니다.ts 통과:
    
// Import our CSS
import '../css/tailwind-base.pcss';
import '../css/app-base.pcss';
import '../css/tailwind-components.pcss';
import '../css/app-components.pcss';
import '../css/tailwind-utilities.pcss';
import '../css/app-utilities.pcss';
    우리의 설정이나 설정에는 다른 변화가 없습니다.
    이것은 웹 패키지로 하여금 가져온 모든 내용을 처리할 수 있게 한다.pcss는 독립적이기 때문에 그것에 영향을 주는 일부 일 (예를 들어tailwind.config.js) 이 변화할 때만 미풍 기반의 CSS (특히 대형 유틸리티 CSS) 를 재구성해야 한다.
    플랫폼 을 비틀어 올리다
    모든 것을 변경합니다.우리가 작성한 pcss 파일은 신속하고 실시간으로 재구성할 수 있습니다.
    💥

    기본 문제 및 솔루션


    이 모든 것을 테스트할 때, 나는 약간의 정보 기준점을 만들었다.저는 2019년 MacBook Pro를 사용합니다. 메모리는 64gb입니다.
    테스트에서 내가 한 것은 배경색을 바꾸는 것뿐이었다. 노란색.배경색: 파란색;css/components/global에서pcss 파일.
    우리가 사용할 때​질문 설정, 브라우저 개발자 JavaScript 콘솔에서 내보내는 WDS(Web Package Development Server)는 다음과 같습니다.
    
[WDS] App updated. Recompiling...
[WDS] App hot update...
[HMR] Checking for updates on the server...
[HMR] Updated modules:
[HMR] - ../src/css/app.pcss
[HMR] App is up to date.
    2019년 Mac Book Pro를 다시 컴파일하는 데 11.74초가 소요됩니다.
    이것은 전체 응용 프로그램을 재구성합니다.PCS입니다.
    우리가 사용할 때​"Solu tion Set up"(솔루션 설정), 브라우저 개발자 JavaScript 콘솔에서 출력되는 웹 패키지 개발 서버[WDS]는 다음과 같습니다.
    
[WDS] App updated. Recompiling...
[WDS] App hot update...
[HMR] Checking for updates on the server...
[HMR] Updated modules:
[HMR] - ../src/css/app-components.pcss
[HMR] App is up to date.
    HMR 재건은 0.52초 만에 완료
    응용 프로그램 구성 요소만 재구성했습니다.pcss, 그리고 효율적인 방식으로 그 차이를 방문자에게 전달합니다.
    따라서 변경을 통해 현재 속도가 22.5배 증가했습니다.
    이것은 매우 좋은 수확으로 개발 체험을 더욱 즐겁게 합니다!
    즐거운 항해를 빕니다!≈ 🚀

    한층 더 읽다


    새 글에 대한 알림을 받고 싶으면 트위터를 팔로우하세요.
    저작권 소유 © 2020nystudio107.nystudio107 디자인
    Netbeans generate config files for JTA Transaction automatically
    [몰입 학습 ①] 환경을 구축하지 않아도 되는 브라우저에서 서버 기술을 배우기에 가장 적합한 "Katacoda"를 사용해 우수한 인프라 기술자의 분위기에 몰입

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage