Devtool tidak diperlukan

Saya sedang mengusahakan projek bahagian hadapan beberapa bulan yang lalu. Projek itu ialah mikrofrontend yang bertujuan untuk disepadukan pada papan pemuka lama.

Sebab pendekatan microfrontend adalah untuk mengurangkan kerumitan pada papan pemuka. Saya teruja dengan cabaran ini dan saya menceburinya.

Saya menyediakan microfrontend menggunakan pek web, bertindak balas dan skrip taip. Saya menggunakan chakra ui sebagai rangka kerja CSS-IN-JS, aksios untuk penyepaduan API dan semuanya berfungsi dengan baik. Walau bagaimanapun, saiz binaan projek itu adalah kira-kira 14mb. Untuk mikrofrontend, itu sangat besar. Ini membawa kepada respons halaman yang sangat perlahan dalam papan pemuka di mana ia disepadukan. Jadi saya diberikan cabaran baharu untuk mengoptimumkan binaan.

Saya fikir binaan itu besar kerana saya menggunakan rangka kerja CSS-IN-JS untuk penggayaan. Jadi saya memfaktorkan semula keseluruhan pangkalan kod daripada chakra-ui kepada sass. Cuba teka, saiz binaan meningkat daripada 14mb kepada kira-kira 21mb ??.

Pada masa itulah saya tahu bahawa isunya bukan mengenai pustaka css atau kod tetapi mengenai konfigurasi webpack. Saya memulakan banyak percubaan dan ralat dengan konfigurasi webpack. Saya kemudian mendapati bahawa apabila saya mengalih keluar devtool, saiz binaan berubah daripada 14mb kepada kira-kira 600kb. Kemudian saya menyemak dokumentasi webpack tentang devtool. Saya sedar ia tidak wajib. Maklumat lanjut di sini:.

Berikut adalah gambaran ringkas ke dalam konfigurasi pek web saya

module.exports = merge(common, {
  name: "client",
  mode: process.env.NODE_ENV,
  devtool: "eval-source-map", //remove devtool
  entry: {
    "microfrontend": "./src/bootstrap.tsx",
  },
  output: {
    path: path.resolve(__dirname, "../dist"),
    filename: "[name]_[hash].js",
    pathinfo: false,
    publicPath: 'http://localhost:6001/',
  },
  ...
}

Ringkasnya, penyelesaian kepada masalah yang saya hadapi telah dibetulkan dengan hanya mengalih keluar satu baris kod.

module.exports = merge(common, {
  name: "client",
  mode: process.env.NODE_ENV,
  entry: {
    "microfrontend": "./src/bootstrap.tsx",
  },
  output: {
    path: path.resolve(__dirname, "../dist"),
    filename: "[name]_[hash].js",
    pathinfo: false,
    publicPath: 'http://localhost:6001/',
  },
  ...
}

Terima kasih kerana membaca. Saya harap anda mendapati ini membantu.

Atas ialah kandungan terperinci Devtool tidak diperlukan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!