Webpack minify CSS - OptimizeCSSAssetsPlugin

Webpack minify CSS - OptimizeCSSAssetsPlugin

  • Trước tiên bạn cần hiểu minify là gì, đó là file được loại bỏ tất cả các khoảng trống thừa, gom các dòng code lại thành một hàng duy nhất, giúp giảm tối đa dung lượng file, nhằm giúp tối ưu source code hơn.
  • Với Webpack chúng ta có thể thực hiện việc này một cách tự động, bằng cách cài plugin và thiết lập cài đặt cho webpack.config.js

Cài đặt và xử lý minify CSS

Để tạo được file minify CSS tự động, ta cần thực hiện các bước sau:

  • Cài đặt plugin MiniCssExtractPlugin: plugin này có rất nhiều ứng dụng hay, sẽ giới thiệu ở bài khác nhe.
  • Cài đặt plugin OptimizeCSSAssetsPlugin.
  • Chỉnh webpack.config.js.
  • Chạy npm run build.

Cài đặt plugin MiniCssExtractPlugin

npm install --save-dev mini-css-extract-plugin
Kết quả

MiniCssExtractPlugin

Cài đặt plugin OptimizeCSSAssetsPlugin

npm install --save-dev optimize-css-assets-webpack-plugin
Kết quả

OptimizeCSSAssetsPlugin

Chỉnh file webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');

module.exports = {
  optimization: {
    minimizer: [new OptimizeCSSAssetsPlugin({})],
  },
  entry: {
    newfile: [
      './src/index.js',
      './src/my-test.js'
    ]
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      title: 'Output Management'
    }),
    new MiniCssExtractPlugin({
      filename: 'style.min.css'
    })
  ],
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          /*'style-loader',*/
          'css-loader'
        ]
      }
    ]
  }
};
  • Chú ý là nội dung trên không cần style-loader nhé, vì sau khi minify xong, thì ta cần chạy file trực tiếp.
  • Giải thích một chút về nội dung trên:
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
  • Gọi 2 plugin, và gán vào 2 biến MiniCssExtractPlugin và OptimizeCSSAssetsPlugin.
optimization: {
    minimizer: [new OptimizeCSSAssetsPlugin({})],
  },
  • Sử dụng OptimizeCSSAssetsPlugin tiến hành minify CSS.
new MiniCssExtractPlugin({
      filename: 'style.min.css'
    })
  • Sử dụng plugin MiniCssExtractPlugin trả kết quả file với tên style.min.css.
MiniCssExtractPlugin.loader,
  • Load, thực thi plugin MiniCssExtractPlugin.

Chạy lệnh npm:

npm run build
  • Lúc này ta sẽ thấy bên trong thư mục dist sẽ xuất hiện 1 file style.min.css đã được minizie từ file style.css.
  • Đồng thời khi này, nội dung file index.html đã được tự động liên kết với file style.min.css vừa tạo.

Nội dung file style.min.css

div{color:#00f}

Nội dung file /dist/index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title<Output Management</title>
  <link href="style.min.css" rel="stylesheet"></head>
  <body>
  <script type="text/javascript" src="newfile.js"></script></body>
</html>
  • Cấu trúc thư mục lúc này:

Webpack-project

  • node_modules

    • ...
  • package.json package.json
  • package.json webpack.config.js
  • package-lock.json package-lock.json

  • dist

    • package.json index.html
    • package.json newfile.js
    • package.json style.min.css

  • src

    • package.json index.js
    • package.json my-test.js
    • package.json style.css

Cài đặt và xử lý minify cho nhiều file CSS

  • Giả sử ta có thêm file top.css bên trong thư mục src với nội dung như sau:
p {
  background-color: #f1f1f1;
}
  • Để minify cho 2 file style.css và top.css, ta chỉ cần import thêm file top.css bên trong file /src/index.js:

Nội dung file /src/index.js

import './style.css';
import './top.css';
function component() {
  const element = document.createElement('div');
  element.innerHTML = 'Hello World!';
  return element;
}
document.body.appendChild(component());

Chạy lệnh npm:

npm run build
  • Lúc này ta sẽ thấy bên trong thư mục dist sẽ xuất hiện 1 file style.min.css với nội dung đã được minizie từ 2 file /src/style.css và /src/top.css.
div{color:#00f}p{background-color:#00f}
  • Cấu trúc thư mục lúc này:

Webpack-project

  • node_modules

    • ...
  • package.json package.json
  • package.json webpack.config.js
  • package-lock.json package-lock.json

  • dist

    • package.json index.html
    • package.json newfile.js
    • package.json style.min.css

  • src

    • package.json index.js
    • package.json my-test.js
    • package.json style.css
    • package.json top.css
  • Ngoài cách trên, ta cũng có thể minify cho nhiều CSS bằng cách, dùng CSS @import các file CSS khác vào bên trong file style.css vẫn được.
  • Bài học tiếp theo sẽ giúp chúng ta cách làm tương tự, nhưng với file Javascript.

Các lệnh chính đã sử dụng trong toàn bộ bài học

Bài học Lệnh đã dùng
Cài đặt Webpack 
cd Webpack-project
npm init -y
npm install --save-dev webpack
npm install --save-dev webpack-cli
Webpack bundle 
npx webpack
Cấu hình Webpack 
npx webpack --config webpack.config.js
npm run build
Webpack quản lý output 
npm run build
Webpack code splitting 
npm install --save lodash
npm run build
npm run build
Cài đặt và setting HtmlWebpackPlugin 
npm install --save-dev html-webpack-plugin
npm run build
Cài đặt và setting CleanWebpackPlugin 
npm install --save-dev clean-webpack-plugin
npm run build
Webpack Cache 
npm run build
npm run build
Webpack gom chung các file javascript 
npm run build
Webpack source map 
npm run build
npm run build
Webpack css loader 
npm install --save-dev style-loader css-loader
npm run build
Webpack minify CSS - OptimizeCSSAssetsPlugin 
npm install --save-dev mini-css-extract-plugin
npm install --save-dev optimize-css-assets-webpack-plugin
npm run build
npm run build

Gom chung các file javascript

Webpack minify Javascript