tree shaking(摇树优化)

• 概念：1 个模块可能有多个方法，只要其中的某个方法使用到了，则整个文件都会被打到bundle 里面去，tree shaking 就是只把用到的方法打入 bundle ，没用到的方法会在uglify 阶段被擦除掉
• 使用：
  • webpack 默认支持，在 .babelrc 里设置 modules: false 即可
  • production mode的情况下默认开启
• 要求：
  • 必须是 ES6 的语法，CJS 的方式不支持
  • 需要tree shaking的模块代码是没有副作用的，否则tree shaking会失效
• Tree Shaking的使用和原理分析

无用的 CSS 如何删除掉？

• PurifyCSS: 遍历代码，识别已经用到的 CSS class，没有用到的已经识别的就会做一个标记。
• uncss: HTML 需要通过 jsdom 加载，所有的样式通过PostCSS解析，通过document.querySelector 来识别在 html 文件里面不存在的选择器

在 webpack 中如何使用 PurifyCSS?

• purifycss-webpack以停止维护，建议使用purgecss-webpack-plugin

• 使用 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 = {
      entry: './src/index.js',
      output: {
          filename: 'bundle.js',
          path: path.join(__dirname, 'dist')
      },
      optimization: {
          splitChunks: {
              cacheGroups: {
                  styles: {
                      name: 'styles',
                      test: /\.css$/,
                      chunks: 'all',
                      enforce: true
                  }
              }
          }
      },
      module: {
          rules: [
              {
                  test: /\.css$/,
                  use: [
                      MiniCssExtractPlugin.loader,
                      "css-loader"
                  ]
              }
          ]
      },
      plugins: [
          new MiniCssExtractPlugin({
              filename: "[name].css",
          }),
          new PurgecssPlugin({
              //path：您可以使用文件数组指定purgecss应分析的内容。它可以是html，pug，blade，...文件。您可以使用glob或glob-all之类的模块轻松获取文件列表
              paths: glob.sync(`${PATHS.src}/**/*`, { nodir: true }),
          }),
      ]
  }
  

参考

• 玩转webpack-全方位掌握webpack核心技能和优化策略