tree-shaking

js：tree-shaking

• 它是指帮助开发者消除不同模块之间的一些无效代码的feature。在webpack中，也是有tree-shaking功能的，但是它的功能十分简单粗暴：只寻找import引入进来的变量是否出现过在模块内，非常简单粗暴。因为在开发过程中，开发者经常会犯这种错误：一些模块曾经引入了进来，但是后来却没有使用到，忘记删除了，这就会导致打包的时候，webpack自带的tree-shaking功能无法将这些无效的feature去除。

• 这是我们需要借助一些第三方插件去做这个事情：

  npm install --save-dev webpack-deep-scope-plugin
  
  //在webpack.config.js中引用
  const WebpackDeepScopeAnalysisPlugin = require('webpack-deep-scope-plugin').default;
  
  module.export = {
      ......
      plugins:[
          new WebpackDeepScopeAnalysisPlugin()
      ]
  }

  详情请参考：https://diverse.space/2018/05/better-tree-shaking-with-scope-analysis

css:tree-shaking

• spa：purifycss-webpack该插件会把所有未被引用的css全部去除

  production：
  npm install --save-dev purifycss-webpack
  
  //在webpack.config.js中引用
  const path = require('path');
  //查找文件
  const glob = require('glob');
  const PurifyCSSPlugin = require('purifycss-webpack');
  module.export = {
      ......
      plugins:[
          new PurifyCSSPlugin({
        // Give paths to parse for rules. These should be absolute!
        paths: glob.sync(path.join(__dirname, './dist/*.html')),
      }),
      ]
  }

• mpa：mini-css-extract-plugin将css从js中抽离出来

  注意：它和style-loader 互斥， 不能同时开启，且HMR(热更新的时候也不支持) ， 只用于开发环境。

  npm install --save-dev mini-css-extract-plugin;
  
  const MiniCssExtractPlugin = require('mini-css-extract-plugin');
  
  module.export = {
    ......
    rules: [
      {
        test: /\.css$/i,
        use: [
          // 'style-loader',
          {//和style-loader 互斥 不能同时开启 HMR(热更新的时候也不支持)  只用于开发环境
            loader: MiniCssExtractPlugin.loader,
            options: {
              publicPath: '../',
            },
          },
          loader: 'css-loader'
          }
        ]
      }
    ]
  }