基于Webpack4的Svelte应用打包体积超限问题排查

Hey, let's break down your issues one by one and fix them up!

1. Why your webpack performance config wasn't working #

First off, I noticed you had the performance section commented out in your webpack.config.js—that's why it wasn't taking effect! Even if you uncomment it, the default threshold (244 KiB) is lower than your bundle's 319 KiB, so you might still see warnings unless you adjust the values. Here's the corrected, working config:

performance: {
  hints: prod ? 'warning' : false, // Only show warnings in production mode
  maxEntrypointSize: 512000, // Raise threshold to 512 KiB (adjust as needed)
  maxAssetSize: 512000
}

Make sure you're running npm run build with NODE_ENV=production (your config already uses mode: process.env.NODE_ENV || 'development', so this should be covered if your build script sets the environment variable).

2. Where did NavBar.svelte.css go? #

Don't panic—this file won't appear in your project directory! It's a temporary file generated in memory by webpack during the build process.

Since you set emitCss: true in the svelte-loader options, webpack extracts the <style> block from your Svelte component into a temporary .css file, processes it with css-loader and MiniCssExtractPlugin, then merges it into your final bundle.css. This all happens internally—no intermediate files are written to disk, so it's totally normal that you can't find it.

3. How to actually reduce your bundle size (not just hide warnings) #

Instead of just suppressing the warning, let's shrink the bundle properly. Here are actionable steps:

a. Import Materialize components on demand #

Right now you're importing the entire Materialize CSS and JS bundle, which adds tons of unused code. Since you only use the Sidenav component, import only what you need:

First, update your main.js to import specific parts:

// Import only Sidenav's styles (use the scss file for better tree shaking)
import 'materialize-css/sass/components/sidenav.scss';
// Import only the Sidenav JS module
import { Sidenav } from 'materialize-css';

Then update NavBar.svelte to use the imported Sidenav instead of the global M:

<script>
import { Sidenav } from 'materialize-css';

document.addEventListener('DOMContentLoaded', function() {
  const elems = document.querySelectorAll('.sidenav');
  const instances = Sidenav.init(elems);
});
</script>

This will cut out most of Materialize's unused code immediately.

b. Enable CSS minification #

Webpack 4 minifies JS by default in production, but you need to add a plugin to minify CSS. Install css-minimizer-webpack-plugin:

npm install css-minimizer-webpack-plugin --save-dev

Then add it to your webpack config's optimization section:

const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');

module.exports = {
  // ... other config
  optimization: {
    minimizer: [
      `...`, // Keep the default JS minimizer
      new CssMinimizerPlugin(),
    ],
  }
}

c. Use code splitting for routes #

If your app has multiple pages, use dynamic import() to lazy-load components that aren't needed on the initial load. For example:

// Instead of: import Gallery from './comp/Gallery.svelte';
const Gallery = () => import('./comp/Gallery.svelte');

Webpack will split these components into separate chunks, reducing the size of your initial bundle.js and bundle.css.

d. Verify tree shaking is working #

Webpack 4 enables tree shaking by default in production mode, but make sure your dependencies (like Materialize) use ES module syntax (import/export). The materialize-css@next version should support this, so you're good to go.

内容的提问来源于stack exchange，提问作者Edgardasun