Issues related to optimization configuration in Webpack-JS Tutorial-php.cn

This article mainly introduces the relevant knowledge of Webpack optimization-narrowing the file search scope. The article introduces the ways to optimize in more detail. Friends in need can refer to it

Webpack will start from Starting from the configured Entry, the import statements in the file are parsed, and then parsed recursively.

When encountering an import statement, Webpack will do two things:

1. Find the corresponding file to be imported according to the import statement. For example, the file corresponding to the require('react') import statement is ./node_modules/react/react.js, and the file corresponding to require('./util') is ./util.js.

2. Based on the found suffix of the file to be imported, use the Loader in the configuration to process the file. For example, JavaScript files developed using ES6 need to be processed using babel-loader.

Although the above two things are very fast for processing a file, when the project becomes large, the amount of files will become very large, and then the problem of slow build speed will be exposed.

Although the above two things cannot be avoided, they need to be minimized to increase speed.

The following introduces ways to optimize them one by one.

Optimize loader configuration

Since the conversion operation of files by Loader is time-consuming, it is necessary to allow as few files as possible to be processed by Loader.

In 2-3 Module, we introduced that when using Loader, you can use the three configuration items test, include, and exclude to hit the files to which Loader wants to apply rules.

In order to allow as few files as possible to be processed by Loader, you can use include to target only which files need to be processed.

Take a project using ES6 as an example. When configuring babel-loader, you can do this:

module.exports = {
 module: {
  rules: [
   {
    // 如果项目源码中只有 js 文件就不要写成 /\.jsx?$/，提升正则表达式性能
    test: /\.js$/,
    // babel-loader 支持缓存转换出的结果，通过 cacheDirectory 选项开启
    use: [&#39;babel-loader?cacheDirectory&#39;],
    // 只对项目根目录下的 src 目录中的文件采用 babel-loader
    include: path.resolve(__dirname, &#39;src&#39;),
   },
  ]
 },
};

Copy after login

You can adjust the directory structure of the project appropriately to facilitate the include when configuring Loader. Reduce the hit area.

Optimize resolve.modules configuration

Introduced in 2-4 Resolve, resolve.modules is used to configure Webpack. Which directories to look for? Third party module.

The default value of resolve.modules is ['node_modules'] , which means to first go to the ./node_modules directory in the current directory to find the module you are looking for. If not found, go to it. Search in the first-level directory ../node_modules, if not, search in ../../node_modules, and so on. This is very similar to the module search mechanism of Node.js.

When the installed third-party modules are placed in the ./node_modules directory in the project root directory, there is no need to search layer by layer in the default way. You can specify the absolute path to store the third-party module. To reduce searching, the configuration is as follows:

module.exports = {
 resolve: {
  // 使用绝对路径指明第三方模块存放的位置，以减少搜索步骤
  // 其中 __dirname 表示当前工作目录，也就是项目根目录
  modules: [path.resolve(__dirname, &#39;node_modules&#39;)]
 },
};

Copy after login

Optimize resolve.mainFields configuration

Introduced in 2-4 Resolve, resolve.mainFields is used Configure which entry file the third-party module uses.

The installed third-party module will have a package.json file used to describe the properties of this module. Some fields are used to describe where the entry file is. resolve.mainFields is used to configure which field is used as the entry file. description of.

The reason why there can be multiple fields describing the entry file is because some modules can be used in multiple environments at the same time, and different codes need to be used for different operating environments.

Take isomorphic-fetch as an example. It is an implementation of the fetch API, but can be used in both browser and Node.js environments.

There are two entry file description fields in its package.json:

{
 "browser": "fetch-npm-browserify.js",
 "main": "fetch-npm-node.js"
}

Copy after login

isomorphic-fetch uses different codes in different running environments because the implementation mechanism of the fetch API is different. , implemented through native fetch or XMLHttpRequest in the browser, and implemented through the http module in Node.js.

The default value of resolve.mainFields is related to the current target configuration. The corresponding relationship is as follows:

When the target is web or webworker, the value is ["browser" , "module", "main"]
When the target is other situations, the value is ["module", "main"]

Take target equal to web as an example. Webpack will first use the browser field in the third-party module to find the module's entry file. If it does not exist, it will use the module field, and so on.

In order to reduce the search steps, when you specify the entry file description field of the third-party module, you can set it as little as possible.

Since most third-party modules use the main field to describe the location of the entry file, Webpack can be configured like this:

module.exports = {
 resolve: {
  // 只采用 main 字段作为入口文件描述字段，以减少搜索步骤
  mainFields: [&#39;main&#39;],
 },
};

Copy after login

When using this method to optimize, you need to take into account all runtime dependencies. In the entry file description field of the third-party module, even if one module is wrong, the built code may not run normally.

Optimize resolve.alias configuration

Introduced in 2-4 Resolve, the resolve.alias configuration item maps the original import path through aliases into a new import path.

In actual projects, we often rely on some huge third-party modules. Taking the React library as an example, the directory structure of the React library installed in the node_modules directory is as follows:

├── dist
│ ├── react.js
│ └── react.min.js
├── lib
│ ... 还有几十个文件被忽略
│ ├── LinkedStateMixin.js
│ ├── createClass.js
│ └── React.js
├── package.json
└── react.js

可以看到发布出去的 React 库中包含两套代码：

一套是采用 CommonJS 规范的模块化代码，这些文件都放在 lib 目录下，以 package.json 中指定的入口文件 react.js 为模块的入口。
一套是把 React 所有相关的代码打包好的完整代码放到一个单独的文件中，这些代码没有采用模块化可以直接执行。其中 dist/react.js 是用于开发环境，里面包含检查和警告的代码。 dist/react.min.js 是用于线上环境，被最小化了。

默认情况下 Webpack 会从入口文件 ./node_modules/react/react.js 开始递归的解析和处理依赖的几十个文件，这会时一个耗时的操作。

通过配置 resolve.alias 可以让 Webpack 在处理 React 库时，直接使用单独完整的 react.min.js 文件，从而跳过耗时的递归解析操作。