Vue和Webpack的树摇、sideEffects和CSS:加载未被使用组件的CSS文件
P粉068174996
P粉068174996 2023-08-25 10:22:08
0
1
608
<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粉068174996
P粉068174996

全部回复(1)
P粉884548619

你可以使用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',
    }),
  ],
}
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板