搜尋

首頁  >  問答  >  主體

Vue和Webpack的樹搖、sideEffects和CSS:載入未被使用元件的CSS文件

<p>我們正在嘗試找出在使用Webpack時處理Vue單一檔案元件中CSS樹搖的正確方式。 </p> <p>在package.json中,我有:<code>"sideEffects": ["*.css", "*.less","*.vue" ]</code>這似乎可以正確地阻止載入不應該載入的Vue元件。然而,每個單一的<code><style></code>標籤都會被載入到頁面上。 </p> <p>我們是從一個NPM包中加載我們的SFC,該包列出了一系列的導出,例如:</p> <pre class="brush:php;toolbar:false;">export blah from 'blah.vue'; export blah2 from 'blah2.vue'; export blah3 from 'blah3.vue';</pre> <p>即使在我們的JavaScript中只有<code>import { blah3 } from 'a-npm-package';</code>,它也會包含所有三個元件的樣式。由於我們有許多Vue元件,這導致了許多未使用的CSS被加入到頁面中。 </p> <p>我們如何防止這種情況發生?肯定有更好、更動態的處理樣式的方式,而不僅僅是將它們全部倒入頁面中,即使只有其中的1/10被使用。 </p> <p>謝謝</p>
P粉068174996P粉068174996488 天前611

全部回覆(1)我來回復

  • P粉884548619

    P粉8845486192023-08-26 09:13:35

    你可以使用MiniCssExtractPlugin來進行CSS的樹搖。如果你使用的是scss或sass,你也可以加入這些loader。

    // 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',
        }),
      ],
    }

    回覆
    0
  • 取消回覆