我们正在尝试找出在使用Webpack时处理Vue单文件组件中CSS树摇的正确方式。
在package.json中，我有："sideEffects": ["*.css", "*.less","*.vue" ]，这似乎可以正确地阻止加载不应该加载的Vue组件。然而，每个单个的<style>标签都会被加载到页面上。
我们是从一个NPM包中加载我们的SFC，该包列出了一系列的导出，例如：
export blah from 'blah.vue'; export blah2 from 'blah2.vue'; export blah3 from 'blah3.vue';
即使在我们的JavaScript中只有import { blah3 } from 'a-npm-package';，它也会包含所有三个组件的样式。由于我们有很多Vue组件，这导致了很多未使用的CSS被添加到页面中。
我们如何防止这种情况发生？肯定有更好、更动态的处理样式的方式，而不仅仅是将它们全部倒入页面中，即使只有其中的1/10被使用。
谢谢
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
1
962
收藏
你可以使用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', }), ], }