Gegaran pokok, sideEffects dan CSS Vue dan Webpack: Muatkan fail CSS komponen yang tidak digunakan
P粉068174996
P粉068174996 2023-08-25 10:22:08
0
1
582
<p>Kami sedang cuba memikirkan cara yang betul untuk mengendalikan pepohon CSS dalam komponen fail tunggal Vue apabila menggunakan Webpack. </p> <p>Dalam package.json, saya ada: <code>"sideEffects": ["*.css", "*.less","*.vue", This nampaknya betul menghalang komponen Vue daripada dimuatkan apabila ia tidak sepatutnya. Walau bagaimanapun, setiap teg <kod><style></code> akan dimuatkan ke halaman. </p> <p>Kami memuatkan SFC kami daripada pakej NPM, yang menyenaraikan satu siri eksport, contohnya: </p> <pre class="brush:php;toolbar:false;">eksport blah daripada 'blah.vue'; eksport blah2 daripada 'blah2.vue'; eksport blah3 daripada 'blah3.vue';</pre> <p>Walaupun kami hanya mempunyai <kod>import { blah3 } daripada 'a-npm-package';</code> Memandangkan kami mempunyai banyak komponen Vue, ini menyebabkan banyak CSS yang tidak digunakan ditambahkan pada halaman. </p> <p>Bagaimanakah kita menghalang perkara ini daripada berlaku? Pasti ada cara pengendalian gaya yang lebih baik dan lebih dinamik daripada hanya membuang semuanya ke dalam halaman, walaupun hanya 1/10 daripadanya digunakan. </p> <p>Terima kasih</p>
P粉068174996
P粉068174996

membalas semua(1)
P粉884548619

Anda boleh menggunakan MiniCssExtractPlugin untuk melakukan gegaran pokok CSS. Jika anda menggunakan scss atau sass, anda boleh menambah pemuat ini juga.

// webpack.config.js (production)
const path = require('path')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {
  mode: 'production',

  entry: path.resolve('src/index.js'),

  output: {
    filename: '[name].js',
    path: path.resolve('dist'),
  },

  module: {
    rules: [
      {
        test: /\.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
      },
      {
        test: /\.css$/,
        exclude: /node_modules/,
        use: [
          // 将css提取到文件中
          MiniCssExtractPlugin.loader,
          // 处理你的应用程序中的`.css`文件的导入
          'css-loader',
        ],
      },
    ],
  },
  plugins: [
    // 将所有的css提取到一个单独的文件中
    new MiniCssExtractPlugin({
      filename: '[name].css',
    }),
  ],
}
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan