จะเปิด / ปิดโหมดการพัฒนา ReactJS ได้อย่างไร?

เริ่มต้นโดยใช้คุณสมบัติการตรวจสอบ propของ ReactJS ซึ่งตามที่เอกสารกล่าวว่าใช้ได้เฉพาะใน 'โหมดการพัฒนา' เพื่อเหตุผลด้านประสิทธิภาพ

การตอบสนองดูเหมือนจะตรวจสอบคุณสมบัติของส่วนประกอบบางอย่างที่ฉันใส่คำอธิบายประกอบ แต่ฉันจำไม่ได้ว่าเปิด 'โหมดการพัฒนา' อย่างชัดเจน

ฉันพยายามค้นหาวิธีเรียกใช้ / สลับโหมดการพัฒนา แต่ยังไม่มีโชค

คำตอบอื่น ๆ ถือว่าคุณกำลังใช้ไฟล์ที่สร้างไว้ล่วงหน้าภายนอกจากการตอบสนองและในขณะที่ถูกต้องนั่นไม่ใช่วิธีที่คนส่วนใหญ่จะใช้หรือควรใช้ React เป็นแพ็คเกจ ยิ่งไปกว่านั้น ณ จุดนี้ไลบรารีและแพ็กเกจ React ส่วนใหญ่ยังอาศัยหลักการเดียวกันในการสลับตัวช่วยเวลาในการพัฒนาระหว่างการผลิต เพียงแค่ใช้การตอบสนองที่ลดขนาดลงจะทำให้การเพิ่มประสิทธิภาพที่เป็นไปได้ทั้งหมดอยู่บนโต๊ะเช่นกัน

ในที่สุดความมหัศจรรย์ก็ลงมาเพื่อตอบสนองการอ้างอิงที่ฝังไปprocess.env.NODE_ENVทั่วทั้ง codebase; สิ่งเหล่านี้ทำหน้าที่เหมือนการสลับคุณลักษณะ

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

ข้างต้นเป็นรูปแบบที่พบบ่อยที่สุดและไลบรารีอื่น ๆ ก็ทำตามเช่นกัน ดังนั้นในการ "ปิด" การตรวจสอบเหล่านี้เราจำเป็นต้องสลับNODE_ENVไป"production"

วิธีที่เหมาะสมในการปิดใช้งาน "โหมด dev" คือผ่านบันเดิลเลอร์ที่คุณเลือก

webpack

ใช้การกำหนดค่าDefinePluginใน webpack ของคุณดังนี้:

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

Browserify

ใช้Envify transform และรันขั้นตอนการสร้าง browserify ด้วยNODE_ENV=production( "set NODE_ENV=production"บน Windows)

ผลลัพธ์

สิ่งนี้จะสร้างบันเดิลเอาต์พุตที่มีอินสแตนซ์ทั้งหมดprocess.env.NODE_ENVถูกแทนที่ด้วยสตริงลิเทอรัล:"production"

โบนัส

เมื่อทำการย่อขนาดโค้ดที่แปลงแล้วคุณสามารถใช้ประโยชน์จาก "Dead Code Elimination" DCE คือเมื่อ minifier ฉลาดพอที่จะรู้ว่า: "production" !== "production"เป็นเท็จเสมอดังนั้นจะลบโค้ดใด ๆ ใน if block ที่ช่วยประหยัดไบต์ของคุณ

ใช่มันไม่ค่อยได้รับการบันทึกไว้เป็นอย่างดี แต่ในหน้าดาวน์โหลด ReactJS จะพูดถึงโหมดการพัฒนาและการผลิต:

เรามี React สองเวอร์ชัน: เวอร์ชันที่ไม่มีการบีบอัดสำหรับการพัฒนาและเวอร์ชันย่อสำหรับการผลิต เวอร์ชันระหว่างการพัฒนามีคำเตือนเพิ่มเติมเกี่ยวกับข้อผิดพลาดทั่วไปในขณะที่เวอร์ชันที่ใช้งานจริงจะมีการปรับแต่งประสิทธิภาพเพิ่มเติมและตัดข้อความแสดงข้อผิดพลาดทั้งหมด

โดยพื้นฐานแล้ว React เวอร์ชันที่ไม่มีการปิดย่อคือโหมด "การพัฒนา" และ React เวอร์ชันย่อส่วนคือโหมด "การผลิต"

หากต้องการอยู่ในโหมด "การผลิต" เพียงใส่เวอร์ชันที่ย่อขนาด react-0.9.0.min.js

ฉันโพสต์สิ่งนี้ที่อื่น แต่ตรงไปตรงมาที่นี่จะเป็นสถานที่ที่ดีกว่า

สมมติว่าคุณติดตั้ง React 15.0.1 ด้วย npm import react from 'react'หรือreact = require('react')จะรัน./mode_modules/react/lib/React.jsซึ่งเป็นแหล่งข้อมูลดิบของ React

เอกสาร React แนะนำให้คุณใช้./mode_modules/react/dist/react.jsสำหรับการพัฒนาและreact.min.jsสำหรับการผลิต

หากคุณลดขนาด/lib/React.jsหรือ/dist/react.jsสำหรับการผลิต React จะแสดงข้อความเตือนว่าคุณได้ลดขนาดรหัสที่ไม่ได้ใช้งานจริง:

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 ทำงานในทำนองเดียวกัน Redux แสดงข้อความเตือน ฉันเชื่อว่า react-dom ก็ทำเช่นกัน

ดังนั้นคุณจึงควรใช้เวอร์ชันที่ใช้งานจริงจาก /distเพื่อให้คุณได้รับการสนับสนุนอย่างชัดเจนเพื่อใช้รุ่นผลิตจาก

อย่างไรก็ตามหากคุณลดขนาด/distเวอร์ชัน UglifyJsPlugin ของ webpack จะบ่น

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

คุณไม่สามารถหลีกเลี่ยงข้อความนี้ได้เนื่องจาก UglifyJsPlugin สามารถยกเว้นส่วนของ webpack เท่านั้นไม่ใช่แต่ละไฟล์

ฉันใช้ทั้ง/distเวอร์ชันพัฒนาและเวอร์ชันที่ใช้งานจริงด้วยตัวเอง

• Webpack มีงานที่ต้องทำน้อยกว่าและเสร็จเร็วกว่าเล็กน้อย (YRMV)
• เอกสารตอบกลับบอกว่า/dist/react.min.jsเหมาะสำหรับการผลิต ฉันไม่ได้อ่านข้อพิสูจน์ว่า'process.env': { NODE_ENV: JSON.stringify(IS_PRODUCTION ? 'production' : 'development') }บวก uglify ทำได้ดีเท่ากับ '/ dist / react.min.js` ฉันไม่ได้อ่านหลักฐานว่าคุณได้รับรหัสผลลัพธ์เดียวกัน
• ฉันได้รับ 1 ข้อความเตือนจาก uglify แทนที่จะเป็น 3 ข้อความจากระบบนิเวศ react / redux

คุณสามารถให้ webpack ใช้/distเวอร์ชันกับ:

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'))
    }
  }

สำหรับการสร้างที่ใช้ webpack ฉันเคยตั้งค่า webpack.config.js แยกกันสำหรับ DEV และ PROD สำหรับ Prod ให้แก้ไขนามแฝงดังต่อไปนี้

     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')
    }

คุณสามารถค้นหาสิ่งที่ใช้งานได้จากที่นี่

หากคุณกำลังทำงานจากบทช่วยสอน ReactJS.NET / Webpackนี้คุณจะไม่สามารถใช้ process.env เพื่อเปิด / ปิดโหมดการพัฒนา React ได้เท่าที่ฉันบอกได้ ตัวอย่างนี้เชื่อมโยงไปยัง react.js โดยตรง (ดูIndex.cshtml ) ดังนั้นคุณเพียงแค่ต้องเลือก. min.js หรือตัวแปรที่ไม่ได้ลดขนาดโดยการเปลี่ยน URL

ฉันไม่แน่ใจว่าเหตุใดจึงเป็นเช่นนั้นเนื่องจาก webpack.config.js ของตัวอย่างมีความคิดเห็นที่ดูเหมือนจะบ่งบอกว่าexternals: { react: 'React' }จะทำงานได้ดี แต่จะดำเนินการต่อและรวมถึงการตอบสนองโดยตรงในหน้า

สำหรับเท่านั้นผู้ใช้ Webpack v4 :

การระบุmode: productionและmode: developmentในการกำหนดค่า Webpack ของคุณจะกำหนดprocess.env.NODE_ENVโดยใช้ DefinePlugin ตามค่าเริ่มต้น ไม่จำเป็นต้องใช้รหัสเพิ่มเติม!

webpack.prod.js (นำมาจากเอกสาร)

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

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

และใน JS ของเรา:

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

เอกสาร Webpack: https://webpack.js.org/guides/production/#specify-the-mode

ฉันใช้กระบวนการสร้างด้วยตนเองที่ทำงานผ่าน Webpack ดังนั้นจึงเป็นกระบวนการสองขั้นตอนสำหรับฉัน:

1. ตั้งค่าตัวแปรสภาพแวดล้อมจาก package.json โดยใช้แพ็คเกจ 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. เปลี่ยนไฟล์ webpack.config.js เพื่อใช้ตัวแปรสภาพแวดล้อม (ซึ่งส่งต่อไปยัง React เพื่อตรวจสอบว่าเราอยู่ในโหมดการพัฒนาหรือการผลิต) และปิดใช้งานการย่อขนาดบันเดิลที่สร้างขึ้นหากเราอยู่ในโหมดการพัฒนาเพื่อให้เราสามารถเห็น ชื่อจริงของส่วนประกอบของเรา เราจำเป็นต้องใช้คุณสมบัติการเพิ่มประสิทธิภาพของwebpack ในไฟล์webpack.config.jsของเราสำหรับสิ่งนี้:

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

webpack v4.41.5, ตอบสนอง v16.9.19, cross-env v7.0.0, โหนด v10.16.14