14 css优化

css优化

将css提取到独立的文件中

为什么将css提取到独立的文件中？
为了多个模块的复用，避免每一个模块都在页面生成style一个标签

mini-css-extract-plugin是用于将CSS提取为独立的文件的插件，对每个包含css的js文件都会创建一个CSS文件，支持按需加载css和sourceMap

https://www.npmjs.com/package/mini-css-extract-plugin

仅用在webpack4中，有如下优势:

• 异步加载
• 不重复编译，性能很好
• 容易使用
• 只针对CSS

使用方法：

1. 安装

   npm i -D mini-css-extract-plugin

2. 在webpack配置文件中引入插件

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

3. 创建插件对象，配置抽离的css文件名，支持placeholder语法

   new MiniCssExtractPlugin({
    filename: '[name].css'
   })

4. 将原来配置的所有style-loader替换为MiniCssExtractPlugin.loader

{
   test: /\.css$/,
   // webpack读取loader时 是从右到左的读取, 会将css文件先交给最右侧的loader来处理
   // loader的执行顺序是从右到左以管道的方式链式调用
   // css-loader: 解析css文件
   // style-loader: 将解析出来的结果 放到html中, 使其生效
   // use: ['style-loader', 'css-loader']
   use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader']
},
// { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
{ test: /\.less$/, use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader'] },
// { test: /\.s(a|c)ss$/, use: ['style-loader', 'css-loader', 'sass-loader'] },
{ test: /\.s(a|c)ss$/, use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'] },

自动添加css前缀

使用postcss，需要用到postcss-loader和autoprefixer插件

1. 安装

   npm i -D postcss-loader autoprefixer

2. 修改webpack配置文件中的loader，将postcss-loader放置在css-loader的右边（调用链从右到左）

   {
   test: /\.css$/,
   // webpack读取loader时 是从右到左的读取, 会将css文件先交给最右侧的loader来处理
   // loader的执行顺序是从右到左以管道的方式链式调用
   // css-loader: 解析css文件
   // style-loader: 将解析出来的结果 放到html中, 使其生效
   // use: ['style-loader', 'css-loader']
   use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader']
   },
   // { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
   { test: /\.less$/, use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'less-loader'] },
   // { test: /\.s(a|c)ss$/, use: ['style-loader', 'css-loader', 'sass-loader'] },
   { test: /\.s(a|c)ss$/, use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'sass-loader'] },
   

3. 项目根目录下添加postcss的配置文件：postcss.config.js

4. 在postcss的配置文件中使用插件

   module.exports = {
     plugins: [require('autoprefixer')]
   }
   

开启css压缩

需要使用optimize-css-assets-webpack-plugin插件来完成css压缩

webpack官方文档中提到，由于配置css压缩时会覆盖掉webpack默认的优化配置，导致JS代码无法压缩，所以还需要手动把JS代码压缩插件导入进来：terser-webpack-plugin

1. 安装

   npm i -D optimize-css-assets-webpack-plugin terser-webpack-plugin

2. 导入插件

   webpack.prod.js
   const TerserJSPlugin = require('terser-webpack-plugin')
   const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
   

3. 在webpack配置文件中添加配置节点

    webpack.prod.js
    module.exports = merge(baseWebpackConfig, {
      mode: 'production',
      optimization: {
        minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})],
      },
    ...
    }
   

tips: webpack4默认采用的JS压缩插件为：uglifyjs-webpack-plugin，在mini-css-extract-plugin上一个版本中还推荐使用该插件，但最新的v0.6中建议使用teser-webpack-plugin来完成js代码压缩，具体原因未在官网说明，按照最新版的官方文档来做即可