Vue 및 Webpack 트리 흔들림, sideEffects 및 CSS: 로드 중인 사용되지 않는 구성 요소의 CSS

Vue 및 Webpack 트리 흔들림, sideEffects 및 CSS: 로드 중인 사용되지 않는 구성 요소의 CSS

우리는 웹팩이 있는 Vue Single File Components의 CSS용 트리 흔들림을 올바르게 처리하는 방법을 찾고 있다.

포장되어.Json, 나는 다음을 가지고 있다."sideEffects": ["*.css", "*.less","*.vue" ], 이것은 Vue 구성 요소가 로딩되어서는 안 될 때 로딩하는 것을 막기 위해 적절하게 작용하고 있는 것처럼 보인다.하지만, 모든 사람들은<style>SFC의 태그가 페이지에 로드되었다.

SFC 로딩 방법은 다음과 같은 많은 수출품들을 나열한 NPM 패키지에서 입니다.

export blah from 'blah.vue';
export blah2 from 'blah2.vue';
export blah3 from 'blah3.vue';

비록 우리의 자바스크립트에서 나는 단지import { blah3 } from 'a-npm-package';그것은 세가지 모두의 스타일을 포함한다.Vue 구성 요소가 꽤 많기 때문에 사용하지 않는 CSS가 페이지에 많이 추가되고 있다.

어떻게 하면 이것을 막을 수 있을까?10분의 1만 사용한다고 해서 모든 스타일을 페이지에 버리는 것보다 더 역동적인 처리 방식이 있어야만 하는가?

고마워요.

MiniCssExtractPlugin을 트리 셰이크 CSS에 사용할 수 있다.또한 만약 당신이 scs나 sass를 사용하고 있다면, 당신은 그 로더들을 추가할 수도 있다.

// 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: [
          // Extract the css to file
          MiniCssExtractPlugin.loader,
          // Handle import of `.css` files in your app
          'css-loader',
        ],
      },
    ],
  },
  plugins: [
    // Extract all css into a separate file
    new MiniCssExtractPlugin({
      filename: '[name].css',
    }),
  ],
}

구성 요소를 게으르게 로드하는 경우 어떻게 하시겠습니까?

구성 요소:style태그는 필요할 때만 로드된다.

하역경로가 게으른 노선에 대해서도 똑같이 할 수 있다.

구성요소가 필요할 때에만 필요한 경우, 구성요소를 게으르게 적재하는 것은 혼란을 줄이는 좋은 방법이다.

ex:

const MyComponent = () => import(/* webpackChunkName: "MyComponent" */'../components/MyComponent');

https://veedose.dll/dll-in-vue-js-for-performance/

또한 웹 팩 구성에 플러그인을 통합하여 MiniCSExtractPlugin과 같은 부피가 큰 코드를 관리할 수 있다.

참조URL: https://stackoverflow.com/questions/65082401/vue-and-webpack-tree-shaking-sideeffects-and-css-css-of-unused-components-bein