<p>Wir versuchen herauszufinden, wie CSS-Bäume in Vue-Einzeldateikomponenten bei Verwendung von Webpack richtig gehandhabt werden. </p> <p>In package.json habe ich: <code>"sideEffects": ["*.css", "*.less","*.vue" ]</code>, This scheint ordnungsgemäß zu verhindern, dass Vue-Komponenten geladen werden, wenn dies nicht der Fall sein sollte. Allerdings wird jedes einzelne <code><style></code>-Tag auf die Seite geladen. </p> <p>Wir laden unseren SFC aus einem NPM-Paket, das eine Reihe von Exporten auflistet, zum Beispiel: </p> <pre class="brush:php;toolbar:false;">bla aus 'blah.vue' exportieren; exportiere blah2 aus 'blah2.vue'; exportiere blah3 aus 'blah3.vue';</pre> <p>Selbst wenn wir nur <code>import { blah3 } from 'a-npm-package';</code> haben, werden die Stile für alle drei Komponenten enthalten sein. Da wir viele Vue-Komponenten haben, führt dies dazu, dass der Seite viel ungenutztes CSS hinzugefügt wird. </p> <p>Wie verhindern wir, dass das passiert? Es gibt definitiv bessere und dynamischere Möglichkeiten, mit Stilen umzugehen, als sie einfach alle auf der Seite abzulegen, selbst wenn nur 1/10 davon verwendet wird. </p> <p>Vielen Dank</p>

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