13-webpack去除项目里的死代码

本文介绍如何利用Webpack的tree-shaking技术去除未使用的JavaScript,并通过Purgecss-webpack-plugin优化CSS,显著减小BootStrap等库的体积,提升前端性能。
摘要由CSDN通过智能技术生成

去除没有用到的JS代码
Webpack通过tree-shaking去掉了实际上并没有使用的js代码来减少包的大小。

  1. 必须使用es6模块化, 2. 开启production环境

去除没有用到的CSS
比如我们经常使用的BootStrap(140KB)就可以减少到只有35KB大小
webpack使用purgecss-webpack-plugin去除无用的css

const PurgecssPlugin = require('purgecss-webpack-plugin');
const glob = require('glob');
const PATHS = { src: join(__dirname, 'src')}

 new PurgecssPlugin({
            paths: glob.sync(`${PATHS.src}/**/*`,  { nodir: true }),
        }),
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值