Làm cách nào để bật / tắt 'chế độ phát triển' của ReactJS?

Đã bắt đầu sử dụng tính năng xác thực prop của ReactJS , như các tài liệu cho biết chỉ hoạt động ở 'chế độ phát triển' vì lý do hiệu suất.

React dường như đang xác thực các thuộc tính của một thành phần cụ thể mà tôi đã chú thích, nhưng tôi không nhớ đã bật 'chế độ phát triển' một cách rõ ràng.

Tôi đã thử tìm kiếm cách kích hoạt / chuyển đổi chế độ phát triển, nhưng không gặp may.

Câu trả lời khác giả sử bạn đang sử dụng các tệp được tạo sẵn bên ngoài từ react, và trong khi đúng thì đó không phải là cách mà hầu hết mọi người sẽ hoặc nên sử dụng React dưới dạng một gói. Hơn nữa, tại thời điểm này, hầu hết mọi thư viện và gói React cũng dựa trên cùng một quy ước để tắt các trình trợ giúp thời gian của nhà phát triển trong quá trình sản xuất. Chỉ cần sử dụng phản ứng được thu nhỏ cũng sẽ để lại tất cả những tối ưu hóa tiềm năng đó.

Cuối cùng, điều kỳ diệu đến với việc nhúng các tham chiếu đến React process.env.NODE_ENVtrong toàn bộ codebase; chúng hoạt động như một nút chuyển đổi tính năng.

if (process.env.NODE_ENV !== "production")
  // do propType checks

Ở trên là mẫu phổ biến nhất và các thư viện khác cũng làm theo. Vì vậy, để "vô hiệu hóa" các kiểm tra này, chúng ta cần chuyển NODE_ENVsang"production"

Cách thích hợp để tắt "chế độ nhà phát triển" là thông qua gói bạn chọn.

webpack

Sử dụng DefinePlugintrong cấu hình gói web của bạn như sau:

new webpack.DefinePlugin({
  "process.env.NODE_ENV": JSON.stringify("production")
})

Duyệt qua

Sử dụng biến đổi Envify và chạy bước xây dựng trình duyệt của bạn với NODE_ENV=production( "set NODE_ENV=production"trên Windows)

Kết quả

Điều này sẽ tạo ra các gói đầu ra có tất cả các trường hợp được process.env.NODE_ENVthay thế bằng chuỗi ký tự:"production"

Tặng kem

Khi giảm thiểu mã đã chuyển đổi, bạn có thể tận dụng "Loại bỏ mã chết". DCE là khi trình thu nhỏ đủ thông minh để nhận ra rằng: luôn"production" !== "production" là sai và vì vậy sẽ chỉ xóa bất kỳ mã nào trong khối if giúp bạn tiết kiệm byte.

Vâng, nó không thực sự được ghi chép đầy đủ, nhưng trên trang tải xuống ReactJS nó nói về các chế độ phát triển và sản xuất:

Chúng tôi cung cấp hai phiên bản React: một phiên bản không nén để phát triển và một phiên bản rút gọn để sản xuất. Phiên bản phát triển bao gồm các cảnh báo bổ sung về các lỗi thường gặp, trong khi phiên bản sản xuất bao gồm các tính năng tối ưu hóa hiệu suất bổ sung và loại bỏ tất cả các thông báo lỗi.

Về cơ bản, phiên bản chưa hợp nhất của React là chế độ "phát triển" và phiên bản thu nhỏ của React là chế độ "sản xuất".

Để ở chế độ "sản xuất", chỉ cần bao gồm phiên bản thu nhỏ react-0.9.0.min.js

Tôi đã đăng bài này ở nơi khác, nhưng thành thật mà nói, đây sẽ là một nơi tốt hơn.

Giả sử bạn cài đặt React 15.0.1 với npm import react from 'react'hoặc react = require('react')sẽ chạy ./mode_modules/react/lib/React.jsđó là nguồn thô của React.

Tài liệu React đề xuất bạn sử dụng ./mode_modules/react/dist/react.jsđể phát triển và react.min.jssản xuất.

Nếu bạn giảm thiểu /lib/React.jshoặc /dist/react.jscho sản xuất, React sẽ hiển thị một thông báo cảnh báo rằng bạn đã giảm thiểu mã phi sản xuất:

Warning: It looks like you're using a minified copy of the development build of React. When deploying React apps to production, make sure to use the production build which skips development warnings and is faster. See fb.me/react-minification for more details.

react-dom, redux, react-redux hoạt động tương tự. Redux hiển thị thông báo cảnh báo. Tôi tin rằng react-dom cũng vậy.

Vì vậy, bạn rõ ràng được khuyến khích sử dụng phiên bản sản xuất từ /dist.

Tuy nhiên, nếu bạn rút gọn các /distphiên bản, UglifyJsPlugin của webpack sẽ phàn nàn.

WARNING in ../~/react/dist/react.js Critical dependencies: 4:478-485 This seems to be a pre-built javascript file. Though this is possible, it's not recommended. Try to require the original source to get better results. @ ../~/react/dist/react.js 4:478-4851

Bạn không thể tránh thông báo này vì UglifyJsPlugin chỉ có thể loại trừ các khối webpack chứ không phải các tệp riêng lẻ.

Tôi tự mình sử dụng cả /distphiên bản phát triển và sản xuất .

• Webpack có ít việc phải làm hơn và kết thúc sớm hơn một chút. (YRMV)
• Tài liệu React nói /dist/react.min.jslà được tối ưu hóa cho quá trình sản xuất. Tôi không đọc được bằng chứng nào cho thấy 'process.env': { NODE_ENV: JSON.stringify(IS_PRODUCTION ? 'production' : 'development') }cộng với uglify làm tốt công việc như '/ dist / react.min.js`. Tôi không đọc bằng chứng nào mà bạn nhận được cùng một mã kết quả.
• Tôi nhận được 1 thông báo cảnh báo từ uglify thay vì 3 từ hệ sinh thái react / redux.

Bạn có thể yêu cầu webpack sử dụng các /distphiên bản với:

resolve: {
    alias: {
      'react$': path.join(__dirname, 'node_modules', 'react','dist',
        (IS_PRODUCTION ? 'react.min.js' : 'react.js')),
      'react-dom$': path.join(__dirname, 'node_modules', 'react-dom','dist',
        (IS_PRODUCTION ? 'react-dom.min.js' : 'react-dom.js')),
      'redux$': path.join(__dirname, 'node_modules', 'redux','dist',
        (IS_PRODUCTION ? 'redux.min.js' : 'redux.js')),
      'react-redux$': path.join(__dirname, 'node_modules', 'react-redux','dist',
        (IS_PRODUCTION ? 'react-redux.min.js' : 'react-redux.js'))
    }
  }

Đối với bản dựng dựa trên webpack, tôi đã từng thiết lập webpack.config.js riêng biệt cho DEV và PROD. Đối với sản phẩm, giải quyết bí danh như bên dưới

     alias: {
        'react$': path.join(__dirname, 'node_modules', 'react','dist','react.min.js'),
        'react-dom$': path.join(__dirname, 'node_modules', 'react-dom','dist','react-dom.min.js')
    }

Bạn có thể tìm thấy một trong những hoạt động từ đây

Nếu bạn đang làm việc từ một cái gì đó giống như hướng dẫn ReactJS.NET / Webpack này , bạn không thể sử dụng process.env để bật / tắt chế độ phát triển React theo như tôi có thể nói. Mẫu này liên kết trực tiếp đến react.js (xem Index.cshtml ), vì vậy bạn chỉ cần chọn .min.js hoặc biến thể không được rút gọn bằng cách thay đổi URL.

Tôi không chắc tại sao lại như vậy, bởi vì webpack.config.js của mẫu có một nhận xét dường như ngụ ý rằng externals: { react: 'React' }sẽ thực hiện công việc, nhưng sau đó tiếp tục và bao gồm phản ứng trực tiếp vào trang.

Đối với chỉ người dùng v4 Webpack:

Chỉ định mode: productionvà mode: developmenttrong cấu hình Webpack của bạn sẽ xác định process.env.NODE_ENVbằng DefinePlugin theo mặc định. Không cần mã bổ sung!

webpack.prod.js (lấy từ tài liệu)

const merge = require('webpack-merge');
const common = require('./webpack.common.js');

module.exports = merge(common, {
  mode: 'production',
});

Và trong JS của chúng tôi:

console.log(process.env.NODE_ENV) // --> 'development' or 'production'

Tài liệu Webpack: https://webpack.js.org/guides/production/#specify-the-mode

Tôi sử dụng quy trình xây dựng thủ công chạy qua Webpack, vì vậy đối với tôi đó là một quy trình gồm hai bước:

1. Đặt biến môi trường từ package.json bằng cách sử dụng gói cross-env:

   "scripts": { "build-dev": "cross-env NODE_ENV=development webpack --config webpack.config.js", "build-prod": "cross-env NODE_ENV=production webpack --config webpack.config.js" }

2. Thay đổi tệp webpack.config.js để sử dụng biến môi trường (được chuyển cho React để xác định xem chúng ta đang ở chế độ phát triển hay sản xuất) và tắt tính năng thu nhỏ gói đã tạo nếu chúng ta đang ở chế độ phát triển để chúng ta có thể thấy tên thực của các thành phần của chúng tôi. Chúng ta cần phải sử dụng webpack của tối ưu hóa tài sản trong chúng tôi webpack.config.js tập tin này:

   optimization: { nodeEnv: process.env.NODE_ENV, minimize: process.env.NODE_ENV === 'production' }

webpack v4.41.5, React v16.9.19, cross-env v7.0.0, nút v10.16.14