【前端工程化】五：webpack5快速入门（四）

Whoopsina

已于 2022-03-01 13:31:01 修改

阅读量856

点赞数 2

分类专栏：前端工程化文章标签：前端 javascript css

于 2022-02-26 16:00:14 首次发布

本文链接：https://blog.csdn.net/whoopsina/article/details/123151258

版权

本文介绍了在webpack5中进行前端工程化的实践，重点讲解了CSS抽离与压缩，包括使用MiniCssExtractPlugin和CssMinimizerPlugin，以及TerserPlugin对JS的压缩。还探讨了scope hoisting、usedExports配置、sideEffects配置和Css TreeShaking等优化技巧，以及资源压缩和inlineChunkHtmlPlugin插件的应用，旨在提升项目性能和打包效率。

摘要由CSDN通过智能技术生成

CSS抽离与压缩

将Css文件单独提取一个文件中，推荐当css文件大于150kb时在考虑使用该插件，否则会多一次css的请求；开发环境中使用压缩性价比不高，所以一般在生产环境中使用；

生产环境下，在loader中配置MiniCssExtractPlugin.loader代替style-loader，在插件中配置MiniCssExtractPlugin的输出路径用于抽离CSS ，配置CssMinimizerPlugin插件来压缩CSS代码

注意： 使用了插件以后，在css的loader配置中就不需要使用style-loader来注入css，而是使用MiniCssExtractPlugin.loader（会通过link的方式来注入）

// 抽离css文件
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
// 压缩css文件
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin")

// 定义对象保存 base 配置信息
const commonConfig = (isProduction) => {
   
  return {
   
    ...,
    optimization: {
   
      minimizer: [
      	new CssMinimizerPlugin()
      ]
    },
    module: {
   
      rules: [
        {
   
          test: /\.css$/,
          use: [
            isProduction ? MiniCssExtractPlugin.loader : 'style-loader',
            {
   
              loader: 'css-loader',
              options: {
   
                importLoaders: 1,
                esModule: false
              }
            },
            'postcss-loader'
          ]
        },
        ...,
      ]
    },
    plugins: [
        ...,
        new MiniCssExtractPlugin({
   
          filename: 'css/[name].[hash:8].css'
        })
      ]
	}
}

TerserPlugin压缩JS

Terser是用来解析和识别js代码并简化（-c），压缩js代码的插件（-m）

我们可以使用命令行工具来执行terser，指定.\src\index.js输出到.\src\index.min.js目录

npx terser .\src\index.js -o .\src\index.min.js

如果我们想在optimization的minimizer属性中使用插件，应该配置minimize为true（实测默认为true）

const TerserPlugin = require("terser-webpack-plugin");

module.exports = {
   
  mode: 'production',
  optimization: {
   
    minimize: true,
    minimizer: [
      new CssMinimizerPlugin(),
      new TerserPlugin({
   
        extractComments: false
      })
    ]