亚欧色一区w666天堂,色情一区二区三区免费看,少妇特黄A片一区二区三区,亚洲人成网站999久久久综合,国产av熟女一区二区三区

  • 發布文章
  • 消息中心
點贊
收藏
評論
分享
原創

Webpack 資源壓縮

2023-07-10 03:46:25
6
0

Webpack是一個廣泛使用的模塊打包工具,它提供了多種資源壓縮相關的功能和插件。下面是一些Webpack常用的資源壓縮技術和插件:

1. 壓縮 JavaScript:可以使用UglifyJS插件來壓縮JavaScript代碼。在Webpack配置文件中,通過在`optimization`選項中配置`minimizer`屬性來啟用UglifyJS插件,例如:

```javascript
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
  // ...
  optimization: {
    minimizer: [new UglifyJsPlugin()],
  },
};
```

2. 壓縮 CSS:使用css-loader和mini-css-extract-plugin插件可以將CSS文件進行壓縮。在Webpack配置文件中,通過添加壓縮CSS的loader和插件,例如:

```javascript
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  // ...
  module: {
    rules: [
      // ...
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
        ],
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].[contenthash].css',
    }),
  ],
  // ...
};
```

3. 壓縮圖片:使用image-webpack-loader插件結合file-loader或url-loader可以對圖片進行壓縮。在Webpack配置文件中,添加對圖片的loader和插件配置,例如:

```javascript
module.exports = {
  // ...
  module: {
    rules: [
      // ...
      {
        test: /\.(png|jpe?g|gif)$/i,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[contenthash].[ext]',
              outputPath: 'images',
            },
          },
          {
            loader: 'image-webpack-loader',
            options: {
              mozjpeg: {
                progressive: true,
                quality: 80,
              },
              optipng: {
                enabled: false,
              },
              pngquant: {
                quality: [0.65, 0.9],
                speed: 4,
              },
              gifsicle: {
                interlaced: false,
              },
              webp: {
                quality: 75,
              },
            },
          },
        ],
      },
    ],
  },
  // ...
};
```

按實際情況選擇適合的插件和配置來實現資源壓縮,從而減小文件大小,提高頁面加載速度。

0條評論
作者已關閉評論
t****m
98文章數
1粉絲數
t****m
98 文章 | 1 粉絲
t****m
98文章數
1粉絲數
t****m
98 文章 | 1 粉絲
原創

Webpack 資源壓縮

2023-07-10 03:46:25
6
0

Webpack是一個廣泛使用的模塊打包工具,它提供了多種資源壓縮相關的功能和插件。下面是一些Webpack常用的資源壓縮技術和插件:

1. 壓縮 JavaScript:可以使用UglifyJS插件來壓縮JavaScript代碼。在Webpack配置文件中,通過在`optimization`選項中配置`minimizer`屬性來啟用UglifyJS插件,例如:

```javascript
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
  // ...
  optimization: {
    minimizer: [new UglifyJsPlugin()],
  },
};
```

2. 壓縮 CSS:使用css-loader和mini-css-extract-plugin插件可以將CSS文件進行壓縮。在Webpack配置文件中,通過添加壓縮CSS的loader和插件,例如:

```javascript
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  // ...
  module: {
    rules: [
      // ...
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
        ],
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].[contenthash].css',
    }),
  ],
  // ...
};
```

3. 壓縮圖片:使用image-webpack-loader插件結合file-loader或url-loader可以對圖片進行壓縮。在Webpack配置文件中,添加對圖片的loader和插件配置,例如:

```javascript
module.exports = {
  // ...
  module: {
    rules: [
      // ...
      {
        test: /\.(png|jpe?g|gif)$/i,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[contenthash].[ext]',
              outputPath: 'images',
            },
          },
          {
            loader: 'image-webpack-loader',
            options: {
              mozjpeg: {
                progressive: true,
                quality: 80,
              },
              optipng: {
                enabled: false,
              },
              pngquant: {
                quality: [0.65, 0.9],
                speed: 4,
              },
              gifsicle: {
                interlaced: false,
              },
              webp: {
                quality: 75,
              },
            },
          },
        ],
      },
    ],
  },
  // ...
};
```

按實際情況選擇適合的插件和配置來實現資源壓縮,從而減小文件大小,提高頁面加載速度。

文章來自個人專欄
文章 | 訂閱
0條評論
作者已關閉評論
作者已關閉評論
0
0