webpack笔记（3）-进阶用法二

tree shaking

概念：1个模块可能有多个方法，只要其中的某个方法用到了，则整个文件都会打包到bundle里面去，tree shaking就是只把有用的方法打到bundle，没用的方法会在uglify阶段被擦除掉。
使用：webpack默认支持，在.babelrc里设置modules: false即可

// 不支持
mode: 'none'
// 生产环境默认开启
mode: 'production'

要求：必须是es6的语法，cjs不支持
会擦出掉DCE(dead code elimination)

scope hoisting

scope hoisting，是把许多个作用域，用一个作用域取代，减少内存消耗，减少包裹代码。
Scope housting对模块的引用次数大于1次是不产生效果的，如果一个模块引用次数大于1次，那么这个模块的代码会被内联多次，从而增加了打包出来的js bundle的体积。

webpack模块机制：

代码分割和动态import

webpack可以将代码库分割成多个chunks，当代码运行到需要它们的时候再进行加载。
适用场景：
抽离相同代码到一个共享块
脚本懒加载，使得初始下载的代码更小

1.安装babel插件：@babel/plugin-syntax-dynamic-import
2.在.babelrc中引用

{
    "presets": [
        "@babel/preset-env",
        "@babel/preset-react"
    ],
    "plugins": ["@babel/plugin-syntax-dynamic-import"]
}

业务代码：

// text.js
import React from "react";
export default() => <div>动态 import</div>

// index.js
class Search extends React.Component {
    constructor() {
        super(...arguments);
        this.state = {
            Text: null
        }
    }
    loadComponent() {
        // 动态引用的是个异步函数
        import('./text.js').then(Text => {
            this.setState({
                Text: Text.default
            })
        });
    }
    render() {
        const {Text} = this.state;
        return <div className="search-text">
            {
                Text ? <Text /> : null
            }
            搜索文字的a<img src={ logo } onClick={this.loadComponent.bind(this)}/>
        </div>;
    }
}

点击图片后展现的代码会打包成另外的chunk

引入eslint

1.webpack与CI/CD集成

code->提交代码->构建->单元测试->集成测试->review->发布->上线
2.webpack与eslint集成

// webpack.prod.js
rules: [
    {
        test: /.js$/,
        use: [
            'babel-loader',
            // 使用eslint-loader，构建时检查js规范
            // 2022年，eslint-loader 已废弃，可以使用 eslint-webpack-plugin 代替
            'eslint-loader'
        ]
    }
]

// 新增.eslintrc.js
module.exports = {
    parser: 'babel-eslint',
    extends: "airbnb",
    env: {
        browser: true,
        node: true
    },
    // 以上有不符合需要自定义的规则
    rules: {
        // indent: [2, 4]也可以
        indent: ['error', 4]
    }
}

官方文档：cn.eslint.org/docs/user-g…