Điều gì làm cho Trình tạo mã đã phát hiện ra kiểu dáng của [một số tệp] khi nó vượt quá mức tối đa của 100KB.

Tôi đã thêm một gói npm mới vào dự án của mình và yêu cầu nó trong một trong các mô-đun của tôi.

Bây giờ tôi nhận được tin nhắn này từ 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".

Nó có nghĩa là gì? Tôi có cần phải thực hiện một số hành động?

Điều này có liên quan đến compacttùy chọn của trình biên dịch Babel, lệnh này "không bao gồm các ký tự khoảng trắng thừa và dấu kết thúc dòng. Khi được đặt thành 'auto' compact được đặt thành true trên kích thước đầu vào> 100KB." Theo mặc định, giá trị của nó là "tự động", vì vậy đó có thể là lý do bạn nhận được thông báo cảnh báo. Xem tài liệu Babel .

Bạn có thể thay đổi tùy chọn này từ Webpack bằng tham số truy vấn . Ví dụ:

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

Đây dường như là một lỗi Babel . Tôi đoán bạn sử dụng trình tải babel và không loại trừ các thư viện bên ngoài khỏi bài kiểm tra trình tải của bạn. Theo như tôi có thể nói, tin nhắn không có hại, nhưng bạn vẫn nên làm một cái gì đó như thế này:

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

Có một cái nhìn. Đó là nó?

Một trong ba tùy chọn dưới đây sẽ loại bỏ thông báo (nhưng vì những lý do khác nhau và với các tác dụng phụ khác nhau tôi cho rằng):

1. loại trừ node_modulesthư mục hoặc rõ ràng includelà thư mục nơi ứng dụng của bạn cư trú (có lẽ không chứa các tệp vượt quá 100KB)
2. đặt tùy chọn Babel compact thành true(thực tế là bất kỳ giá trị nào ngoài "tự động")
3. đặt tùy chọn Babel compactthành false(xem bên trên)

# 1 trong danh sách trên có thể đạt được bằng cách loại trừ node_modulesthư mục hoặc rõ ràng bao gồm cả thư mục nơi ứng dụng của bạn cư trú.

Ví dụ webpack.config.js:

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

... hoặc bằng cách sử dụng include: path.resolve(__dirname, 'app/')(một lần nữa trong webpack.config.js).

# 2 và # 3 trong danh sách trên có thể được thực hiện bằng phương pháp được đề xuất trong câu trả lời này hoặc (sở thích của tôi) bằng cách chỉnh sửa .babelrctệp. Ví dụ:

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

Đã thử nghiệm với các thiết lập sau:

$ 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

Tôi đã thử cách của Ricardo Stuven nhưng nó không hiệu quả với tôi. Điều cuối cùng đã làm việc là thêm "compact": false vào tệp .babelrc của tôi:

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

Để đọc giải thích thêm THIS LINK, tùy chọn của Babel compilercác lệnh đó là không bao gồm các ký tự khoảng trắng thừa và dấu kết thúc dòng. một số lần trước đây ngưỡng của nó là 100KBnhưng bây giờ là 500KB.

Tôi tin rằng bạn vô hiệu hóa tùy chọn này trong môi trường phát triển của bạn, với mã này trong .babelrctệp.

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

Đối với môi trường sản xuất, Babelsử dụng cấu hình mặc định auto.

Trong React / redux / webpack / babel build đã sửa lỗi này bằng cách xóa loại thẻ script text / babel

gặp lỗi:

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

không có lỗi:

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

trong webpack 4 với nhiều quy tắc mô-đun, bạn sẽ làm một cái gì đó như thế này trong quy tắc .js của bạn:

{
     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
     }
},

Đây có thể không phải là trường hợp của câu hỏi OP ban đầu, nhưng: nếu bạn vượt quá kích thước tối đa mặc định, đây có thể là triệu chứng của một số vấn đề khác mà bạn gặp phải. trong trường hợp của tôi, tôi đã có cảnh báo, nhưng cuối cùng nó đã biến thành L ERI L FATI: MarkCompactCollector: sao chép bán không gian, dự phòng trong thế hệ cũ Phân bổ thất bại - JavaScript hết bộ nhớ. Lý do là tôi đã tự động nhập mô-đun hiện tại , vì vậy điều này đã kết thúc với một vòng lặp vô tận ...