webpack tree-shaking

最新推荐文章于 2024-08-18 12:50:14 发布

前端女孩

最新推荐文章于 2024-08-18 12:50:14 发布

阅读量725

点赞数

分类专栏： webpack 文章标签： webpack javascript 前端

本文链接：https://blog.csdn.net/weixin_45002586/article/details/127843292

版权

webpack 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

Tree-Shaking是一种优化技术，用于移除JavaScript和CSS中未使用的代码。在开发环境中，通过webpack配置实现，如`usedExports: true`和`sideEffects`排除特定文件。生产环境默认开启。对于CSS，可以使用purifycss-webpack插件配合glob-all进行清理。该技术提高了代码的效率，减少了打包后的文件大小。

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

过滤掉无用的JS代码和CSS代码, 我们称之为Tree-Shaking.

1、JS-Tree-Shaking

①　开发环境
webpack.config.js配置, 告诉webpack只打包导入模块中用到的内容：

  optimization: {
    usedExports: true,
  },

package.json配置, 告诉webpack哪些文件不做Tree-Shaking：

 "sideEffects": ["*.css", "*.less", "*.scss"],

②　生产环境
无需进行任何配置, webpack默认已经实现了Tree-Shaking
③　注意点:

只有ES Modle导入才支持Tree-Shaking
任何导入的文件都会受到 tree shaking 的影响。

2、CSS-Tree-Shaking

https://github.com/webpack-contrib/purifycss-webpack

①　安装相关插件

npm i -D purifycss-webpack purify-css glob-all

②　配置插件

const glob = require('glob-all');
const PurifyCSSPlugin = require('purifycss-webpack');
new PurifyCSSPlugin({
    // 告诉PurifyCSSPlugin需要过滤哪些文件
    paths: glob.sync([
      path.join(__dirname, 'src/*.html'),
      path.join(__dirname, 'src/js/*.js'),
   ]),
}),