打包优化之config

本篇文章演示通过配置 缩小查找范围， 配置不解析的模块文件， 忽略某些特定的模块， 费时分析， libraryTarget 和 library。来优化和分析打包流程，下面来介绍他们的配置方法和注意事项。

# 1. 缩小范围

# 1.1 extensions

指定extension之后可以不用在require或是import的时候加文件扩展名,会依次尝试添加扩展名进行匹配

resolve: {
  extensions: [".js",".jsx",".json",".css"]
},

1
2
3

# 1.2 alias

配置别名可以加快webpack查找模块的速度

每当引入bootstrap模块的时候，它会直接引入bootstrap,而不需要从node_modules文件夹中按模块的查找规则查找

const bootstrap = path.resolve(__dirname,'node_modules/bootstrap/dist/css/bootstrap.css')
resolve: {
+    alias:{
+        bootstrap
+    }
},

1
2
3
4
5
6

# 1.3 modules

对于直接声明依赖名的模块（如 react ），webpack 会类似 Node.js 一样进行路径搜索，搜索node_modules目录
这个目录就是使用
```
resolve.modules
```
1
字段进行配置的默认配置
```
resolve: {
modules: ['node_modules'],
}
```
1
2
3
如果可以确定项目内所有的第三方依赖模块都是在项目根目录下的 node_modules 中的话
```
resolve: {
modules: [path.resolve(__dirname, 'node_modules')],
}
```
1
2
3

# 1.4 mainFields

默认情况下package.json 文件则按照文件中 main 字段的文件名来查找文件

resolve: {
  // 配置 target === "web" 或者 target === "webworker" 时 mainFields 默认值是：
  mainFields: ['browser', 'module', 'main'],
  // target 的值为其他时，mainFields 默认值为：
  mainFields: ["module", "main"],
}

1
2
3
4
5
6

# 1.5 mainFiles

当目录下没有 package.json 文件时，我们说会默认使用目录下的 index.js 这个文件，其实这个也是可以配置的

resolve: {
  mainFiles: ['index'], // 你可以添加其他默认使用的文件名
},

1
2
3

# 1.6 resolveLoader

resolve.resolveLoader用于配置解析 loader 时的 resolve 配置,默认的配置：

module.exports = {
  resolveLoader: {
    modules: [ 'node_modules' ],
    extensions: [ '.js', '.json' ],
    mainFields: [ 'loader', 'main' ]
  }
};

1
2
3
4
5
6
7

# 2. noParse

module.noParse 字段，可以用于配置哪些模块文件的内容不需要进行解析
不需要解析依赖（即无依赖）的第三方大型类库等，可以通过这个字段来配置，以提高整体的构建速度
```
module.exports = {
// ...
module: {
  noParse: /jquery|lodash/, // 正则表达式
  // 或者使用函数
  noParse(content) {
    return /jquery|lodash/.test(content)
  },
}
}...
```
1
2
3
4
5
6
7
8
9
10
使用 noParse 进行忽略的模块文件中不能使用 import、require、define 等导入机制

# 3. IgnorePlugin

IgnorePlugin用于忽略某些特定的模块，让 webpack 不把这些指定的模块打包进去

# 3.1 src/index.js

import moment from  'moment';
import 'moment/locale/zh-cn'
console.log(moment().format('MMMM Do YYYY, h:mm:ss a'));

1
2
3

# 3.2 webpack.config.js

import moment from  'moment';
console.log(moment);
      new webpack.IgnorePlugin({
          //A RegExp to test the context (directory) against.
          contextRegExp: /moment$/,
          //A RegExp to test the request against.
          resourceRegExp: /^\.\/locale/
      new MiniCSSExtractPlugin({
          filename:'[name].css'
      })

1
2
3
4
5
6
7
8
9
10

第一个是匹配引入模块路径的正则表达式
第二个是匹配模块的对应上下文，即所在目录名

# 4.费时分析

const SpeedMeasureWebpackPlugin = require('speed-measure-webpack-plugin');
const smw = new SpeedMeasureWebpackPlugin();
module.exports =smw.wrap({
});

1
2
3
4

# 5.webpack-bundle-analyzer

是一个webpack的插件，需要配合webpack和webpack-cli一起使用。这个插件的功能是生成代码分析报告，帮助提升代码质量和网站性能

cnpm i webpack-bundle-analyzer -D
const {BundleAnalyzerPlugin} = require('webpack-bundle-analyzer');
module.exports={
  plugins: [
    new BundleAnalyzerPlugin()
  ]
}

1
2
3
4
5
6
7

# 6. libraryTarget 和 library

outputlibrarytarget (opens new window)
当用 Webpack 去构建一个可以被其他模块导入使用的库时需要用到它们
output.library 配置导出库的名称
output.libraryExport 配置要导出的模块中哪些子模块需要被导出。它只有在 output.libraryTarget 被设置成 commonjs 或者 commonjs2 时使用才有意义
output.libraryTarget 配置以何种方式导出库,是字符串的枚举类型，支持以下配置

libraryTarget	使用者的引入方式	使用者提供给被使用者的模块的方式
var	只能以script标签的形式引入我们的库	只能以全局变量的形式提供这些被依赖的模块
commonjs	只能按照commonjs的规范引入我们的库	被依赖模块需要按照commonjs规范引入
commonjs2	只能按照commonjs2的规范引入我们的库	被依赖模块需要按照commonjs2规范引入
amd	只能按amd规范引入	被依赖的模块需要按照amd规范引入
this
window
global
umd	可以用script、commonjs、amd引入	按对应的方式引入

# 6.1 var (默认)

编写的库将通过var被赋值给通过library指定名称的变量。

# 6.1.1 webpack.config.js

{
  output: {
        path: path.resolve("build"),
        filename: "[name].js",
+       library:'calculator',
+       libraryTarget:'var'
  }
}

1
2
3
4
5
6
7
8

# 6.1.2 index.js

module.exports =  {
    add(a,b) {
        return a+b;
    }
}

1
2
3
4
5

# 6.1.3 bundle.js

var calculator=(function (modules) {}({})

# 6.1.4 index.html

    <script src="bundle.js"></script>
    <script>
        let ret = calculator.add(1,2);
        console.log(ret);
    </script>

1
2
3
4
5

# 6.2 commonjs

编写的库将通过 CommonJS 规范导出。

# 6.2.1 导出方式

exports["calculator"] = (function (modules) {}({})

# 6.2.2 使用方式

let main = require('./main');
console.log(main.calculator.add(1,2));
require('npm-name')['calculator'].add(1,2);

1
2
3

npm-name是指模块发布到 Npm 代码仓库时的名称

# 6.3 commonjs2

编写的库将通过 CommonJS 规范导出。

# 6.3.1 导出方式
```
module.exports = (function (modules) {}({})
```
1

# 6.3.2 使用方式

require('npm-name').add();

在 output.libraryTarget 为 commonjs2 时，配置 output.library 将没有意义。

# 6.4 this

编写的库将通过 this 被赋值给通过 library 指定的名称，输出和使用的代码如下：

# 6.4.1 导出方式
```
this["calculator"]= (function (modules) {}({})
```
1

# 6.4.2 使用方式

this.calculator.add();

# 6.5 window

编写的库将通过 window 被赋值给通过 library 指定的名称，即把库挂载到 window 上，输出和使用的代码如下：

# 6.5.1 导出方式
```
window["calculator"]= (function (modules) {}({})
```
1

# 6.5.2 使用方式

window.calculator.add();

# 6.6 global

编写的库将通过 global 被赋值给通过 library 指定的名称，即把库挂载到 global 上，输出和使用的代码如下：

# 6.6.1 导出方式
```
global["calculator"]= (function (modules) {}({})
```
1

# 6.6.2 使用方式

global.calculator.add();

# 6.7 umd

(function webpackUniversalModuleDefinition(root, factory) {
  if(typeof exports === 'object' && typeof module === 'object')
    module.exports = factory();
  else if(typeof define === 'function' && define.amd)
    define([], factory);
  else if(typeof exports === 'object')
    exports['MyLibrary'] = factory();
  else
    root['MyLibrary'] = factory();
})(typeof self !== 'undefined' ? self : this, function() {
  return _entry_return_;
});

1
2
3
4
5
6
7
8
9
10
11
12

编辑

上次更新: 2022/05/22, 18:34:11

← 代码分割打包优化之loader&plugin→

打包优化之config

# 1. 缩小范围

# 1.1 extensions

# 1.2 alias

# 1.3 modules

# 1.4 mainFields

# 1.5 mainFiles

# 1.6 resolveLoader

# 2. noParse

# 3. IgnorePlugin

# 3.1 src/index.js

# 3.2 webpack.config.js

# 4.费时分析

# 5.webpack-bundle-analyzer

# 6. libraryTarget 和 library

# 6.1 var (默认)

# 6.1.1 webpack.config.js

# 6.1.2 index.js

# 6.1.3 bundle.js

# 6.1.4 index.html

# 6.2 commonjs

# 6.2.1 导出方式

# 6.2.2 使用方式

# 6.3 commonjs2

# 6.3.1 导出方式

# 6.3.2 使用方式

# 6.4 this

# 6.4.1 导出方式

# 6.4.2 使用方式

# 6.5 window

# 6.5.1 导出方式

# 6.5.2 使用方式

# 6.6 global

# 6.6.1 导出方式

# 6.6.2 使用方式

# 6.7 umd