webpack优化篇(四十八):使用 Tree Shaking 擦除无用的 JavaScript 和 CSS

Posted 凯小默

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了webpack优化篇(四十八):使用 Tree Shaking 擦除无用的 JavaScript 和 CSS相关的知识,希望对你有一定的参考价值。

说明

玩转 webpack 学习笔记

tree shaking(摇树优化)

概念:1 个模块可能有多个方法,只要其中的某个方法使用到了,则整个文件都会被打到 bundle 里面去,tree shaking 就是只把用到的方法打入 bundle ,没用到的方法会在 uglify 阶段被擦除掉。

使用:webpack 默认支持,在 .babelrc 里设置 modules: false 即可

  • production mode的情况下默认开启

要求:必须是 ES6 的语法,CJS 的方式不支持

这里 js 方面的不多说,具体可以参考我这篇:webpack进阶篇(二十一):Tree Shaking的使用和原理分析

无用的 CSS 如何删除掉?

PurifyCSS: 遍历代码,识别已经用到的 CSS class

uncss: html 需要通过 jsdom 加载,所有的样式通过 PostCSS 解析,通过 document.querySelector 来识别在 html 文件里面不存在的选择器

在 webpack 中如何使用 PurifyCSS?

使用 purgecss-webpack-plugin:https://github.com/FullHuman/purgecss-webpack-plugin 和 mini-css-extract-plugin 配合使用

const path = require('path')
const glob = require('glob')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const PurgecssPlugin = require('purgecss-webpack-plugin')

const PATHS = 
    src: path.join(__dirname, 'src')


module.exports = 
    module: 
        rules: [
            
                test: /\\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    "css-loader"
                ]
            
        ]
    ,
    plugins: [
        new MiniCssExtractPlugin(
            filename: "[name].css",
        ),
        // 路径需要的是绝对路径,多页面需要传递数组,通过 glob 找到符合路径下面的所有的都匹配出来
        new PurgecssPlugin(
            paths: glob.sync(`$PATHS.src/**/*`,  nodir: true ),
        ),
    ]

实战

没有优化掉无用的 css

我们在 search 的css 里添加一个没用使用的类

然后我们打包,去 dist 目录里找到 search 的 css 文件,可以看到这个类也打包进去了,我格式化了一下 css 文件

使用 purgecss-webpack-plugin 优化掉无用的 css

先安装依赖

npm i purgecss-webpack-plugin -D

添加配置

添加好之后,运行打包命令,我们可以看到没有使用的类就被清除掉了。

以上是关于webpack优化篇(四十八):使用 Tree Shaking 擦除无用的 JavaScript 和 CSS的主要内容,如果未能解决你的问题,请参考以下文章

webpack优化篇(四十一):体积分析:使用 webpack-bundle-analyzer

webpack优化篇(四十二): 使用高版本的 webpack 和 Node.js

webpack优化篇(四十):速度分析:使用 speed-measure-webpack-plugin

webpack优化篇(四十七):缩小构建目标

webpack优化篇(四十四):多进程并行压缩代码

webpack优化篇(四十五):进一步分包:预编译资源模块