Tree Shake, SideEffects und CSS von Vue und Webpack: Laden Sie CSS-Dateien nicht verwendeter Komponenten

Question

Wir versuchen herauszufinden, wie CSS-Bäume in Vue-Einzeldateikomponenten bei Verwendung von Webpack richtig gehandhabt werden.

In package.json habe ich: "sideEffects": ["*.css", "*.less","*.vue" ], This scheint ordnungsgemäß zu verhindern, dass Vue-Komponenten geladen werden, wenn dies nicht der Fall sein sollte. Allerdings wird jedes einzelne

Answer 1

你可以使用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',
    }),
  ],
}