“ ตัวสร้างรหัสได้ทำให้รูปแบบของไฟล์ [บางไฟล์] ช้าลงเนื่องจากเกินขนาดสูงสุด” 100KB“” หมายความว่าอย่างไร

ฉันเพิ่มแพ็กเกจ npm ใหม่ให้กับโครงการของฉันและต้องการมันในหนึ่งในโมดูลของฉัน

ตอนนี้ฉันได้รับข้อความนี้จาก webpack

build modulesNote: The code generator has deoptimised the styling of "D:/path/to/project/node_modules/ramda/dist/ramda.js" as it exceeds the max of "100KB".

มันหมายความว่าอะไร? ฉันจำเป็นต้องดำเนินการบ้างไหม?

สิ่งนี้เกี่ยวข้องกับcompactตัวเลือกของ Babel compiler ซึ่งคำสั่ง"ไม่รวมอักขระช่องว่างและฟุ่มเฟือยบรรทัดที่ไม่จำเป็นเมื่อตั้งค่าเป็น 'auto' คอมแพคจะถูกตั้งค่าเป็นจริงในขนาดอินพุต> 100KB" โดยค่าเริ่มต้นค่าของมันคือ "อัตโนมัติ" ดังนั้นนั่นอาจเป็นเหตุผลที่คุณได้รับข้อความเตือน โปรดดูเอกสารบาเบล

คุณสามารถเปลี่ยนตัวเลือกนี้จาก Webpack ใช้พารามิเตอร์การค้นหา ตัวอย่างเช่น:

loaders: [
    { test: /\.js$/, loader: 'babel', query: {compact: false} }
]

นี้น่าจะเป็นข้อผิดพลาดของบาเบล ฉันเดาว่าคุณใช้ babel-loader และไม่รวมไลบรารี่ภายนอกจากการทดสอบโหลดเดอร์ของคุณ เท่าที่ฉันสามารถบอกได้ข้อความนั้นไม่เป็นอันตราย แต่คุณควรทำสิ่งนี้:

loaders: [
    { test: /\.js$/, exclude: /node_modules/, loader: 'babel' }
]

ได้ดู นั่นมัน

ตัวเลือกข้อใดข้อหนึ่งจากสามข้อด้านล่างนี้จะกำจัดข้อความ (แต่ด้วยเหตุผลที่ต่างกันและด้วยผลข้างเคียงที่แตกต่างกันฉันว่า):

1. ยกเว้นnode_modulesไดเรกทอรีหรืออย่างชัดเจนincludeไดเรกทอรีที่แอพของคุณอยู่ (ซึ่งสันนิษฐานว่าไม่มีไฟล์เกิน 100KB)
2. ตั้งค่าตัวเลือกบาเบล compactเป็นtrue(จริง ๆ แล้วค่าอื่น ๆ นอกเหนือจาก "อัตโนมัติ")
3. ตั้งค่าตัวเลือกบาเบลcompactเป็นfalse(ดูด้านบน)

# 1 ในรายการด้านบนสามารถทำได้โดยไม่รวมnode_modulesไดเรกทอรีหรืออย่างชัดเจนรวมถึงไดเรกทอรีที่แอพของคุณอยู่

เช่นในwebpack.config.js:

let path = require('path');
....
module: {
     loaders: [
          ...
          loader: 'babel',
          exclude: path.resolve(__dirname, 'node_modules/')

... หรือโดยการใช้include: path.resolve(__dirname, 'app/')(อีกครั้งในwebpack.config.js)

# 2 และ # 3 ในรายการด้านบนสามารถทำได้โดยวิธีการที่แนะนำในคำตอบนี้หรือ (การตั้งค่าของฉัน) โดยการแก้ไข.babelrcไฟล์ เช่น:

$ cat .babelrc 
{
    "presets": ["es2015", "react"],
    "compact" : true
}

ทดสอบกับการตั้งค่าต่อไปนี้:

$ npm ls --depth 0 | grep babel
├── babel-core@6.7.4
├── babel-loader@6.2.4
├── babel-preset-es2015@6.6.0
├── babel-preset-react@6.5.0

ฉันลองใช้วิธีของ Ricardo Stuven แต่ไม่ได้ผลสำหรับฉัน สิ่งที่ได้ผลในท้ายที่สุดคือการเพิ่ม "กะทัดรัด": false ไปยังไฟล์. babelrc ของฉัน:

{
    "compact": false,
    "presets": ["latest", "react", "stage-0"]
}

สำหรับคำอธิบายเพิ่มเติมอ่านTHIS LINKมันเป็นตัวเลือกของBabel compilerคำสั่งที่จะไม่รวมถึงตัวอักษรช่องว่างที่ฟุ่มเฟือยและสิ้นสุดบรรทัด บางครั้งที่ผ่านมาเกณฑ์ของมันแต่ในขณะนี้คือ100KB500KB

ฉันแนะนำให้คุณปิดการใช้งานตัวเลือกนี้ในสภาพแวดล้อมการพัฒนาของคุณด้วยรหัสนี้ใน.babelrcไฟล์

{
    "env": {
      "development" : {
        "compact": false
      }
    }
}

สำหรับสภาพแวดล้อมการผลิตการใช้การตั้งค่าเริ่มต้นซึ่งเป็นBabelauto

In react / redux / webpack / babel build แก้ไขข้อผิดพลาดนี้โดยการลบ text / babel ประเภทแท็กสคริปต์

มีข้อผิดพลาด:

<script type="text/babel" src="/js/bundle.js"></script>

ไม่มีข้อผิดพลาด:

<script src="/js/bundle.js"></script>

ใน webpack 4 ที่มีกฎโมดูลหลายกฎคุณเพียงแค่ทำสิ่งนี้ในกฎ. js ของคุณ:

{
     test: /\.(js)$/,
     loader: 'babel-loader',
     options: {
          presets: ['es2015'],    // or whatever
          plugins: [require('babel-plugin-transform-class-properties')], // or whatever
          compact: true    // or false during development
     }
},

นี่อาจไม่ใช่กรณีของคำถาม OP ดั้งเดิม แต่: หากคุณเกินขนาดสูงสุดเริ่มต้นนี่อาจเป็นอาการของปัญหาอื่นที่คุณมี ในกรณีของฉันฉันมีสงคราม แต่ในที่สุดมันก็กลายเป็นข้อผิดพลาด FATAL: MarkCompactCollector: สำเนากึ่งพื้นที่การสำรองในการจัดสรร Gen เก่าล้มเหลว - JavaScript กองออกจากหน่วยความจำ เหตุผลก็คือฉันนำเข้าโมดูลปัจจุบันแบบไดนามิกดังนั้นจึงจบลงด้วยการวนซ้ำไม่รู้จบ ...