webpack学习第十步——Tree Shaking

tree shaking只支持es module

• Tress Shaking 只支持es module,因为import是一种静态引入的方式，而require引入文件（common js）是一种动态引入的方式

新建math文件导出两个方法

• math.js

export const add = (a,b) => {
    console.log(a + b)
}

export const minus = (a,b) => {
    console.log(a - b)
}

• index.js

import { add } from './math'

add(1,2)

• 打包后文件

使用tree shaking

• 修改webpack.config.js

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin')
const webpack = require('webpack')
module.exports = {
    mode: "development",
    entry: {
        main: './src/index.js',
    },
    devtool: "none",
    devServer: {
        contentBase: './build',
        open: true,
        port: 1314,
        hot: true,
        hotOnly: true // hmr失效时是否不刷新页面
    },
    module: {
        rules: [{
            test: /\.(jpg|png|gif)$/,
            use: {
                loader: "url-loader",
                options: {
                    name: '[name]_[hash].[ext]',
                    outputPath: 'images/',
                    limit: 2048
                }
            }
        },{
            test: /\.css$/,
            use: [
                'style-loader',
                'css-loader',
                'postcss-loader'
            ]
        },{
            test: /\.js$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
        }]
    },
    plugins: [
        new HtmlWebpackPlugin({
        template: 'src/index.html'
        }),
        new CleanWebpackPlugin(),
        new webpack.HotModuleReplacementPlugin()
    ],
    // 表示打包被使用的部分
    optimization: {
        usedExports: true
    },
    output: {
        path: path.resolve(__dirname, 'build'),
        filename: '[name].js'
    }
}

• 修改package.json

"name": "webpackstudy",
  "version": "1.0.0",
  //对所有模块进行正常tree shaking
  "sideEffects": false,
  "description": "",
  "main": "src/index.js",
  "scripts": {
    "start": "webpack",
    "server": "node server.js"
  },

• sideEffect解释

// "sideEffects": [不需要tree shaking的包],
如
"sideEffects": [*.css],
因为 import ./style.css这种没有导出任何东西，tree-shaking会将其忽略，但实际上是要使用的

打包后的文件

• development Mode

标识出了导出了的和被使用的，之所以打出来的文件还有minus方法，是因为development模式下方便开发者调试,方便source-map调试

• 将mode改为production打包出来的文件就不会有minus方法

production模式会默认有optimization: { usedExports: true }