webpack进阶2

·  阅读 75

tree shaking(摇树优化)

1 个模块可能有多个⽅方法,只要其中的某个方法使用到了,则整个文件都会被打到 bundle 里面去,tree shaking 就是只把用到的方法打入bundle ,没用到的方法会在 uglify 阶段被擦除掉。

使用:webpack 默认⽀支持。
要求:必须是ES6 的语法,CJS 的方式不支持 · production mode的情况下默认开启。

scope hoisting

构建后的代码存在大量闭包代码:

大量作用域包裹代码,导致体积增大(模块越多越明显),运行代码时创建的函数作用域变多,内存开销变大。

打包出来的是一个IIFE ,modules 是一个数组,每⼀项是一个模块初始化函数。__webpack_require ⽤用来加载模块,返回module.exports。通过WEBPACK_REQUIRE_METHOD(0) 启动程序。

原理:将所有模块的代码按照引用顺序放在一个函数作用域里,然后适当的重命名一些变量以防止变量名冲突。

代码分割

对于大的Web 应用来讲,将所有的代码都放在一个文件中显然是不够有效的,特别是当你的 某些代码块是在某些特殊的时候才会被使用到。webpack 有一个功能就是将你的代码库分割成 chunks(语块),当代码运行到需要它们的时候再进行加载。

懒加载JS 脚本的方式

  1. CommonJS:require.ensure;
  2. ES6:动态import(目前还没有原生⽀支持,需要babel 转换)。
yarn add @babel/plugin-syntax-dynamic-import --dev

.babelrc配置:

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

产生一个新的js文件,需要的时候才发送http请求这个文件

示例

通过react的click函数动态加载组件:

import { helloWebpack } from "./hello.js";
import React from "react";
import ReactDom from "react-dom";
import ascii from "../image/ascii码表.jpg";
import "./index.less";

export default class Search extends React.Component {
  constructor() {
    super(...arguments);
    this.state = {
      Dynamic: null,
    };
  }

  render() {
    let { Dynamic } = this.state;
    return (
      <section>
        <h2>react-WDS</h2>
        <h2 onClick={this.loadComponent.bind(this)}>{helloWebpack()}</h2>
        {Dynamic ? <Dynamic /> : null}
        <img src={ascii} />
      </section>
    );
  }

  loadComponent() {
  	// 动态引入
    import("./dynamic.js").then((Dynamic) => {
      console.log(this, Dynamic.default);
      this.setState({
        Dynamic: Dynamic.default,
      });
    });
  }
}

ReactDom.render(<Search />, document.getElementById("root"));

dynamic.js文件:

import React from "react";

export default function dynamicIm() {
  return <h2>dynamic import</h2>;
}

ESLint检查

使用eslint-loader,构建时检查JS 规范 首先安装 eslint极其依赖:

yarn add eslint babel-eslint eslint-config-airbnb eslint-loader eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react --dev

如果以上npm包安装失败,就请分别安装。

webpack配置:

{
  test: /\.js$/,
  exclude: /node_modules/,
  use: [
    "babel-loader",
    'eslint-loader'
  ],
},

新建.eslintrc.js文件,使用airbnb-eslint,输入以下配置:

module.exports = {
  parser: "babel-eslint",
  extends: "airbnb",
  env: {
    browser: true,
    node: true,
  },
  rules: {
    indent: ["error", 4],
  },
};

优化构建时日志显示

构建时展示一大堆日志,很多并不需要开发者关注。

统计信息stats设置

优化命令行的构建日志

使用friendly-errors-webpack-plugin

安装:

yarn add friendly-errors-webpack-plugin --dev

日志提示:

  • success: 构建成功的日志提示;
  • warning: 构建警告的日志提示
  • error: 构建报错的日志提示

stats 设置成errors-only

//  插件里面配置
new FriendlyErrorsWebpackPlugin(),

//  设置统计信息
stats: 'errors-only'

成功时: 警告时: 失败时: 配置后日志非常简短的展示出来。

构建异常和中断处理

webpack4 之前的版本构建失败不会抛出错误码(error code)。

Node.js 中的process.exit 规范

  • 0 表示成功完成,回调函数中,err 为null;
  • 非0 表示执行失败。

主动捕获并处理构建错误

compiler 在每次构建结束后会触发done 这个hook。process.exit 主动处理构建报错。

plugins: [
  function () {
    this.hooks.done.tap("done", (stats) => {
      if (
        stats.compilation.errors &&
        stats.compilation.errors.length &&
        process.argv.indexOf("--watch") == -1
      ) {
        console.log("build error");
        process.exit(1);
      }
    });
  },
];
分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改