webpack（五）tree shaking

tree shaking概念

把应用程序想象成一棵树，把引入的第三方库或者源代码可以理解为绿色的树叶，而没有引入的库和无用的源代码可以理解为灰色的恶枯萎的树叶，tree shaking 这一操作就是为了去除这些灰色的无用的树叶（代码），这样会使我们的代码体积更小，请求速度更快，加载速度也更快。

tree shaking前提条件

1. 必须使用ES6模块化；
2. 开启production环境：mode: ‘production’,

简单实现

创建demo

项目中新建名为test的js文件，定义两个方法，将两个方法暴露出去：

在indexjs中引入，为了方便说明，只引入其中一个方法：

如上所述，test.js中未引入的方法对于tree shaking 这一操作来说就是灰色的叶子（无用代码），而接下来的打包操作将会去除这些叶子。执行webpack打包，生成文件如下：

可以看到搜索count方法并没有打包进去，这就说tree shaking操作起作用了，但是有个问题，它会将index.js 中引入的css文件也给剔除，因为在package.json文件中sideEffects: false的意思是所有代码都没有副作用，所以需要对sideEffects进行一些配置：

可以将一些不需要tree_shaking的文件后缀作为标记放入此配置中，tree_shaking的操作就不会影响到这些文件了。
最后是webpack的基本配置：

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');

process.env.NODE_ENV = 'production';

const commonCssLoader = [
  MiniCssExtractPlugin.loader,
  'css-loader',
  {
    loader: 'postcss-loader',
    options: {
      ident: 'postcss',
      plugins: () => [
        // eslint-disable-next-line global-require
        require('postcss-preset-env')(),
      ],
    },
  },
];

module.exports = {
  entry: './src/js/index.js',
  output: {
    filename: 'js/built.[contenthash:10].js',
    path: resolve(__dirname, 'build'),
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        enforce: 'pre',
        loader: 'eslint-loader',
        options: {
          fix: true,
        },
      },
      {
        oneOf: [
          {
            test: /\.css$/,
            use: [...commonCssLoader],
          },
          {
            test: /\.less$/,
            use: [...commonCssLoader, 'less-loader'],
          },
          {
            test: /\.js$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
            options: {
              presets: [
                [
                  '@babel/preset-env',
                  {
                    useBuiltIns: 'usage',
                    corejs: { version: 3 },
                    targets: {
                      chrome: '60',
                      firefox: '50',
                    },
                  },
                ],
              ],
              // 开启babel缓存，第二次构建时会读取之前的缓存
              cacheDirectory: true,
            },
          },
          {
            test: /\.(jpg|png|gif)/,
            loader: 'url-loader',
            options: {
              limit: 8 * 1024,
              name: '[hash:10].[ext]',
              outputPath: 'imgs',
              esModule: false,
            },
          },
          {
            test: /\.html$/,
            loader: 'html-loader',
          },
          {
            exclude: /\.(css|less|js|html|png|jpg|gif)/,
            loader: 'file-loader',
            options: {
              outputPath: 'media',
            },
          },
        ],
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'css/built.[contenthash:10].css',
    }),
    new OptimizeCssAssetsWebpackPlugin(),
    new HtmlWebpackPlugin({
      template: './src/index.html',
      minify: {
        collapseWhitespace: true,
        removeComments: true,
      },
    }),
  ],
  mode: 'production',
  devtool: 'source-map',
};