<bdo id='HsSsW'></bdo><ul id='HsSsW'></ul>

  • <i id='HsSsW'><tr id='HsSsW'><dt id='HsSsW'><q id='HsSsW'><span id='HsSsW'><b id='HsSsW'><form id='HsSsW'><ins id='HsSsW'></ins><ul id='HsSsW'></ul><sub id='HsSsW'></sub></form><legend id='HsSsW'></legend><bdo id='HsSsW'><pre id='HsSsW'><center id='HsSsW'></center></pre></bdo></b><th id='HsSsW'></th></span></q></dt></tr></i><div id='HsSsW'><tfoot id='HsSsW'></tfoot><dl id='HsSsW'><fieldset id='HsSsW'></fieldset></dl></div>

      <tfoot id='HsSsW'></tfoot>

    1. <small id='HsSsW'></small><noframes id='HsSsW'>

      1. <legend id='HsSsW'><style id='HsSsW'><dir id='HsSsW'><q id='HsSsW'></q></dir></style></legend>

        webpack4 CSS Tree Shaking的使用

        时间:2023-12-14

        • <bdo id='HBxyQ'></bdo><ul id='HBxyQ'></ul>
          <legend id='HBxyQ'><style id='HBxyQ'><dir id='HBxyQ'><q id='HBxyQ'></q></dir></style></legend>

          <small id='HBxyQ'></small><noframes id='HBxyQ'>

            <tfoot id='HBxyQ'></tfoot>
              <tbody id='HBxyQ'></tbody>

              • <i id='HBxyQ'><tr id='HBxyQ'><dt id='HBxyQ'><q id='HBxyQ'><span id='HBxyQ'><b id='HBxyQ'><form id='HBxyQ'><ins id='HBxyQ'></ins><ul id='HBxyQ'></ul><sub id='HBxyQ'></sub></form><legend id='HBxyQ'></legend><bdo id='HBxyQ'><pre id='HBxyQ'><center id='HBxyQ'></center></pre></bdo></b><th id='HBxyQ'></th></span></q></dt></tr></i><div id='HBxyQ'><tfoot id='HBxyQ'></tfoot><dl id='HBxyQ'><fieldset id='HBxyQ'></fieldset></dl></div>
                • 下面是webpack4的CSS tree shaking的使用攻略。

                  什么是CSS tree shaking

                  CSS tree shaking是一项优化技术,通过去除没有使用到的CSS代码,可以显著减小CSS的文件大小。在webpack4中,CSS tree shaking是通过PurgeCSS实现的,PurgeCSS是一个可以检查CSS中未使用样式的工具。

                  如何使用CSS tree shaking

                  1. 配置webpack.config.js

                  首先需要在webpack.config.js文件中添加PurgeCSS插件,下面是一个示例:

                  const path = require('path');
                  const MiniCssExtractPlugin = require('mini-css-extract-plugin');
                  const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
                  const PurgecssWebpackPlugin = require('purgecss-webpack-plugin');
                  const glob = require('glob');
                  
                  module.exports = {
                    entry: './src/index.js',
                    output: {
                      filename: 'bundle.[hash:8].js',
                      path: path.join(__dirname, 'dist')
                    },
                    mode: 'production',
                    module: {
                      rules: [
                        {
                          test: /\.css$/,
                          use: [
                            MiniCssExtractPlugin.loader,
                            {
                              loader: 'css-loader',
                              options: {
                                importLoaders: 1,
                                modules: {
                                  localIdentName: '[local]_[hash:base64:5]'
                                }
                              }
                            },
                            'postcss-loader'
                          ]
                        }
                      ]
                    },
                    optimization: {
                      minimizer: [new OptimizeCSSAssetsPlugin()]
                    },
                    plugins: [
                      new MiniCssExtractPlugin({
                        filename: 'bundle.[hash:8].css'
                      }),
                      new PurgecssWebpackPlugin({
                        paths: glob.sync(`${path.join(__dirname, 'src')}/**/*`, { nodir: true })
                      })
                    ]
                  };
                  

                  2. 添加要检查的文件路径

                  在webpack.config.js中,需要在PurgeCSS插件中添加要检查的文件路径,需要忽略的文件路径等信息。在示例代码中,我们使用了glob库来动态获取要检查的文件路径,代码如下:

                  new PurgecssWebpackPlugin({
                    paths: glob.sync(`${path.join(__dirname, 'src')}/**/*`, { nodir: true }),
                    whitelist: ['html', 'body'],
                    whitelistPatterns: [/^nav-/]
                  })
                  

                  上面的例子表示要检查src目录下的所有文件,但是要排除目录。同时,我们也可以通过whitelist和whitelistPatterns选项来排除一些CSS代码。

                  3. 添加ignoreCSS选项

                  如果你使用了Less或者Sass等CSS预处理器,需要在webpack.config.js的PurgeCSS插件中添加ignoreCSS选项,这是因为PurgeCSS无法直接解析这些预处理器所编写的代码。示例代码如下:

                  new PurgecssWebpackPlugin({
                    paths: glob.sync(`${path.join(__dirname, 'src')}/**/*`, { nodir: true }),
                    whitelist: ['html', 'body'],
                    whitelistPatterns: [/^nav-/],
                    ignoreCSS: ['^theme']
                  })
                  

                  注意,ignoreCSS选项中的正则表达式必须匹配预处理器中的类名前缀。

                  CSS tree shaking示例说明

                  下面我将给出两个CSS tree shaking的示例:

                  示例1

                  在过去的网站制作中,开发者会频繁使用reset.css进行重置默认样式。 但是在项目开发以后会发现css文件变大了,一些reset.css中的样式并没有用到。

                  例如reset.cs里面的h1-h6标签样式,我们通常在项目中基本上都自己定义了。这样reset.css中的不必要的样式就可以使用CSS tree shaking去除。代码如下:

                  /* reset.css */
                  h1{ font-size: 32px; }
                  h2{ font-size: 24px; }
                  h3{ font-size: 18px; }
                  h4{ font-size: 16px; }
                  h5{ font-size: 14px; }
                  h6{ font-size: 12px; }
                  

                  使用CSS tree shaking后,只会保留有用的h1样式,而其他h2-h6样式就会被移除:

                  /* after css tree shaking */
                  h1{ font-size: 32px; }
                  

                  示例2

                  在后端渲染的前端项目中,我们通常会使用一些第三方库,如Bootstrap。但是,这些库通常过大且包含一些我们使用不到的样式。通过CSS Tree Shaking,我们可以去除这些无用的CSS样式。

                  下面是一个以Bootstrap为例的代码:

                  <!DOCTYPE html>
                  <html lang="en">
                  <head>
                    <title>Hello, world!</title>
                    <meta charset="UTF-8">
                    <meta name="viewport" content="width=device-width, initial-scale=1.0">
                    <link rel="stylesheet" href="./bootstrap.css">
                    <link rel="stylesheet" href="./style.css">
                  </head>
                  <body>
                    <div class="container">
                      <h1>Hello, world!</h1>
                    </div>
                    <script src="./index.js"></script>
                  </body>
                  </html>
                  

                  在样式中我们只使用了.container一个类名,在webpack4环境下使用CSS Tree Shaking处理后,我们的生成的CSS文件中将只包含使用到的样式类名。

                  <!DOCTYPE html>
                  <html lang="en">
                  <head>
                    <title>Hello, world!</title>
                    <meta charset="UTF-8">
                    <meta name="viewport" content="width=device-width, initial-scale=1.0">
                    <link rel="stylesheet" href="./bootstrap.css">
                    <link rel="stylesheet" href="./style.704c0d72.css">
                  </head>
                  <body>
                    <div class="container">
                      <h1>Hello, world!</h1>
                    </div>
                    <script src="./index.js"></script>
                  </body>
                  </html>
                  

                  可以看到,处理后的CSS文件只包含了我们使用到的.container类名,而其他无用的样式都被去除了。

                  以上就是webpack4的CSS tree shaking的使用攻略。

                  上一篇:CSS3不透明度实例讲解 下一篇:HTML+CSS实现单选框、复选框美观的样式

                  相关文章

                  <i id='ikevf'><tr id='ikevf'><dt id='ikevf'><q id='ikevf'><span id='ikevf'><b id='ikevf'><form id='ikevf'><ins id='ikevf'></ins><ul id='ikevf'></ul><sub id='ikevf'></sub></form><legend id='ikevf'></legend><bdo id='ikevf'><pre id='ikevf'><center id='ikevf'></center></pre></bdo></b><th id='ikevf'></th></span></q></dt></tr></i><div id='ikevf'><tfoot id='ikevf'></tfoot><dl id='ikevf'><fieldset id='ikevf'></fieldset></dl></div>

                      <bdo id='ikevf'></bdo><ul id='ikevf'></ul>

                    1. <legend id='ikevf'><style id='ikevf'><dir id='ikevf'><q id='ikevf'></q></dir></style></legend>
                    2. <small id='ikevf'></small><noframes id='ikevf'>

                    3. <tfoot id='ikevf'></tfoot>