1, the tree shaking

  • Talking about tree shaking means talking about mode
  • When the mode for the develoment | none, not used to the module will be packaged in
  • When mode is production, unused modules are not packaged
  • Of course, there are ways to package in
Add a side effect list to package.json file. If the list doesn't work, it will be packaged"sideEffects": [
  "**/*.css"."**/*.scss"."./esnext/index.js"."./esnext/configure.js"].Copy the code

2, the Scope of Hoisting

  • Problems when not enabled: The packaged code has a lot of closure code, resulting in larger size, more scope, and more memory overhead
  • When enabled: will be wrapped with webpack import will be compiled to __webpack_require and packaged out of IIFE(anonymous closure)
  • How it works: Place all module code sequentially in the scope of a function, and then rename some variables appropriately to prevent variable name conflicts, thereby reducing the declaration and memory overhead of the function
  • When the mode for the develoment | none
/ / can manually open new webpack. Optimize. ModuleConcatenationPlugin (),Copy the code
  • This function is enabled by default when mode is production
  • Only ES6 syntax is supported

3. Code segmentation and dynamic import

  • Dynamic import is supported by the Babel plug-in
{
  "presets": [["@babel/preset-env"]."@babel/preset-react"]."plugins": ["@babel/plugin-syntax-dynamic-import"]}Copy the code
import React from "react";
import ReactDOM from "react-dom";
import logo from ".. /.. /.. /images/loaders.png";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      Text: null}; } loadComponent =() = > {
  // The text component is also packaged separately and loaded dynamically when clicked
    import("./text.js").then((Text) = > {
      this.setState({
        Text: Text.default,
      });
    });
  };

  render() {
    const { Text } = this.state;
    return (
      <div className="search">
        {Text ? <Text /> : "11"}
        <img onClick={this.loadComponent} src={logo} alt="" />
      </div>
    );
  }
}

ReactDOM.render(<App />.document.getElementById("root"));
Copy the code

4. Use ESLint in WebPack

  • Create the.eslintrc.js file
module.exports = {
  // Both the used and inherited Lint packages need to be installed
  "parser": "babel-eslint"."extends": "airbnb".// "rules": {
  // "semi": "error"
  // },
  "env": {
    "browser": true."node": true}}Copy the code
  • Webpack configuration modified
 module: {
    rules: [{test: /.js$/,
        use: [
          "babel-loader"."eslint-loader"],},]}Copy the code
  • For more details, see eslint.bootcss.com/

Webpack packages components or base libraries

I am ashamed to say that I have not registered NPM for more than two years, and I do not even have a simple component library

  • See the code
- webpack configurationconst TerserPlugin = require("terser-webpack-plugin");
module.exports = {
  entry: {
    "larger-number": "./src/index.js"."larger-number.min": "./src/index.js",},mode: 'none'.output: {
    filename: "[name].js".// The name of the packaging library
    library: "largeNumber".// Support amd CMD ES6 script tag introduction
    libraryTarget: "umd".libraryExport: "default",},optimization: {
    minimize: true.minimizer: [
      // mode: production
      new TerserPlugin({
        include: /\.min\.js$/,}),],},}; --index uses packaged filesif (process.env.NODE_ENV === "production") {
  module.exports = require("./dist/larger-number.min.js");
} else {
  module.exports = require("./dist/larger-number.js");
}
Copy the code

Github address: github.com/838216870/w…

Continuous learning, want to communicate welcome comments and messages;