DOM 요소에서 스프레드 연산자 사용 

앱을 빌드 할 때 스프레드 연산자를 예약되지 않은 방식으로 사용하는 것은 실제로 좋지 않습니다. 이것은 알려지지 않은 속성을 가지고 있을 것이고, 상황이 실제로 복잡해지기 시작하는 것은 시간 문제 일 뿐입니다. 다음은 간단한 예입니다.

const GroceriesLabel = props => {
    return (
      <div {...props}>
        {props.text}
      </div>
    );
  };

구축 중인 응용 프로그램이 커질수록. . .props는 무엇이든 포함 할 수 있습니다. 더 안전하고 안전한 방법은 필요한 값을 식별하는 것입니다.

const GroceriesLabel = props => {
    return (
      <div particularValue={props.particularValue}>
        {props.text}
      </div>
    );
};

성능 해킹 

Gzip을 사용하여 번들 압축 

이것은 매우 효율적이며 파일 크기를 65 %까지 줄일 수 있습니다. 응용 프로그램의 대부분의 파일은 많은 반복 텍스트와 공백을 사용합니다. Gzip은 이러한 반복 문자열을 압축하여 웹 사이트의 첫 렌더링 시간을 크게 단축 시켜서 이를 처리합니다. Gzip은 압축 중 파일을 압축하기 위한 Webpack의 로컬 플러그인인 compressionplugin을 사용하여 파일을 사전 압축합니다. 먼저 compressionPlugin을 사용하여 압축 된 번들을 만들어 보겠습니다.

plugins: [
    new CompressionPlugin({
        asset: "[path].gz[query]",
        algorithm: "gzip",
        test: /.js$|.css$|.html$/,
        threshold: 10240,
        minRatio: 0.8
    })
]

파일이 압축되면 미들웨어를 사용하여 제공 될 수 있습니다.

//this middleware serves all js files as gzip
app.use(function(req, res, next) {
    const originalPath = req.path;
    if (!originalPath.endsWith(".js")) {
        next();
        return;
    }
    try {
        const stats = fs.statSync(path.join("public", `${req.path}.gz`));
        res.append('Content-Encoding', 'gzip');
        res.setHeader('Vary', 'Accept-Encoding');
        res.setHeader('Cache-Control', 'public, max-age=512000');
        req.url = `${req.url}.gz`;

        const type = mime.lookup(path.join("public", originalPath));
        if (typeof type != 'undefined') {
            const charset = mime.charsets.lookup(type);
            res.setHeader('Content-Type', type + (charset ? '; charset=' + charset : ''));
        }
    } catch (e) {}
    next();
})