Webpack 优化构建性能

1. 分析构建性能

分析构建体积

1. 全局安装 webpack-bundle-analyzer 插件

   npm i -g webpack-bundle-analyzer
   

2. 运行 webpack-bundle-analyzer

   webpack-bundle-analyzer
   

分析构建速度

// webpack.config.jsconst SpeedMeasurePlugin = require("speed-measure-webpack-plugin");
const smp = new SpeedMeasurePlugin();module.exports = smp.wrap(prodWebpackConfig)

2. 分析构建过程

1. 开始打包，需要获取所有的依赖模块

   搜索所有的依赖项，这需要占用一定的时间，即搜索时间，那么就确定了：
   需要优化的第一个时间就是搜索时间。

2. 解析所有的依赖模块（解析成浏览器可运行的代码）

   Webpack 根据配置的 loader 解析相应的文件。日常开发中需要使用 loader 对 JS、CSS、图片、字体等文件做转换操作，并且转换的文件数据量也是非常大。由于 JS 单线程的特性使得这些转换操作不能并发处理文件，而是需要一个个文件进行处理。
   需要优化的第二个时间就是解析时间。

3. 将所有的依赖模块打包到一个文件

   将所有解析完成的代码，打包到一个文件中，为了使浏览器加载的包更新（减小白屏时间），所以 Webpack 会对代码进行优化。 JS 压缩是发布编译的最后阶段，通常 Webpack 需要卡好一会，这是因为压缩 JS 需要先将代码解析成 AST 语法树，然后需要根据复杂的规则去分析和处理 AST，最后将 AST 还原成 JS，这个过程涉及到大量计算，因此比较耗时，打包就容易卡住。
   需要优化的第三个时间就是压缩时间。

4. 二次打包

   当更改项目中一个小小的文件时，需要重新打包，所有的文件都必须要重新打包，需要花费同初次打包相同的时间，但项目中大部分文件都没有变更，尤其是第三方库。
   需要优化的第四个时间就是二次打包时间。

3. 优化构建性能

升级版本

使用最新版本的 Webpack 和 Node.js，因为高版本的 Webpack、Node.js 在内置的 API、算法上都更优。

---

优化搜索时间

缩小文件搜索范围

Webpack 打包时，会从配置的 entry 出发，解析入口文件的导入语句，再递归的解析，在遇到导入语句时 Webpack 会做两件事情：

1. 根据导入语句去寻找对应的要导入的文件
2. 根据找到的要导入文件的后缀，使用配置中的 loader 去处理文件

---

优化 Loader 配置

可以通过 test、include、exclude 来限制 Loader 要应用的文件.

• test：配置要解析的文件类型
• include：配置要解析的文件
• exclude：配置不解析的文件

// webpack.config.jsmodule.exports = {module: {rules: [{// 匹配 js、mjs 文件test: /\.m?js$/,// 排除 node_modules、bower_components 目录下的文件搜索exclude: /(node_modules|bower_components)/,use: {loader: 'babel-loader',options: {presets: ['@babel/preset-env']}}}]}
}

---

优化 resolve.modules 配置

resolve.modules 用于配置 webpack 解析模块时应该搜索的目录。

resolve.modules 的默认值是 ['node_modules'] ，含义是先去当前目录下的 ./node_modules 目录下去找想找的模块，如果没找到就去上一级目录 ../node_modules 中找，再没有就去 ../../node_modules 中找，以此类推。

• 相对路径：如果当前目录下没有 node_modules，则递归到父目录下查找，直到找到
• 绝对路径：只查找当前目录，不递归

// webpack.config.jsmodule.exports = {resolve: {// 将 node_modules 目录下的文件视为 modulemodules: [path.resolve(__dirname, 'node_modules')],},
};

---

优化 resolve.alias 配置

resolve.alias 配置项通过别名来把原导入路径映射成一个新的导入路径，减少耗时的递归解析操作。

// webpack.config.jsconst path = require('path');module.exports = {resolve: {alias: {// 将当前目录下的 src 目录配置别名为 @'@': path.resolve(__dirname, 'src'),},},
};

---

减少不必要的编译工作

优化 resolve.extensions 配置

在导入语句没带文件后缀时，webpack 会根据 resolve.extension 自动带上后缀后去尝试询问文件是否存在。

// webpack.config.jsmodule.exports = {resolve: {// 在解析未带后缀的文件时，会按照 .js -> .css 的顺序进行查找extensions: ['.js', '.css'],},
};

---

优化 resolve.mainFields 配置

有一些第三方模块会针对不同环境提供几份代码。 Webpack 会根据 mainFields 的配置去决定优先采用哪份代码：

// webpack.config.jsmodule.exports = {resolve: {// 先采用 jsnext:main 的代码，再采用 main 的代码mainFields: ['jsnext:main', 'main'],},
};

---

优化 module.noParse 配置

module.noParse 配置项可以让 Webpack 忽略对部分没采用模块化的文件的递归解析处理，这样做的好处是能提高构建性能。
原因是一些库，例如：JQuery 、Lodash， 它们庞大又没有采用模块化标准，让 Webpack 去解析这些文件耗时又没有意义。

// webpack.config.jsmodule.exports = {module: {// 忽略 jquery 和 lodash 库noParse: /jquery|lodash/,// 第二种写法noParse: (content) => /jquery|lodash/.test(content),},
};

---

优化 resolve.symlinks 配置

如果不使用 symlinks（例如：npm link 或者 yarn link），可以设置 resolve.symlinks: false。

// webpack.config.jsmodule.exports = {resolve: {symlinks: false},
};

---

优化 resolve.cacheWithContext 配置

如果使用自定义 resolve plugin 规则，并且没有指定 context 上下文，可以设置 resolve.cacheWithContext: false。

// webpack.config.jsmodule.exports = {resolve: {cacheWithContext: false},
};

---

优化解析时间

多线程并行解析 - thread-Loader

1. 安装 thread-loader

   npm i thread-loader
   

2. 配置 webpack.config.js

   // webpack.config.jsmodule.exports = {module: {rules: [{test: /\.js$/,include: path.resolve('src'),use: ["thread-loader", // 一定要放在其他 loader 后面],},],},
   };
   

---

使用资源模块替换 Loader

使用 Webpack 资源模块（asset module）代替旧的 Assets Loader（例如：file-loader/url-loader/raw-loader 等），减少 Loader 配置数量。

---

使用 HappyPack

HappyPack 能让 Webpack 多线程解析 Loader，它把任务分解给多个子进程去并发的执行，子进程处理完后再把结果发送给主进程。

1. 安装 happypack

   npm i -D happypack
   

2. 配置 webpack.config.js

// webpack.config.jsconst path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const HappyPack = require('happypack');module.exports = {module: {rules: [{test: /\.js$/,// 把对 js 文件的处理转交给 id 为 babel 的 HappyPack 实例use: ['happypack/loader?id=babel'],// 排除 node_modules 目录下的文件，node_modules 目录下的文件都是采用的 ES5 语法，没必要再通过 Babel 去转换exclude: path.resolve(__dirname, 'node_modules'),},{test: /\.css$/,use: ExtractTextPlugin.extract({// 把对 css 文件的处理转交给 id 为 css 的 HappyPack 实例use: ['happypack/loader?id=css'],}),},]},plugins: [new HappyPack({// 用唯一的标识符 id 来代表当前的 HappyPack 是用来处理一类特定的文件id: 'babel',// 如何处理 js 文件，用法和 Loader 配置中一样loaders: ['babel-loader?cacheDirectory'],}),new HappyPack({id: 'css',loaders: ['css-loader'],}),new ExtractTextPlugin({filename: `[name].css`,}),],
};

---

优化压缩时间

多线程压缩

Webpack v3

1. 安装 webpack-parallel-uglify-plugin

   npm i -D webpack-parallel-uglify-plugin
   

2. 配置 webpack.config.js

   // webpack.config.jsconst ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin');module.exports = {plugins: [// 使用 ParallelUglifyPlugin 并行压缩输出的 JS 代码new ParallelUglifyPlugin({// 传递给 UglifyJS 的参数uglifyJS: {output: {// 最紧凑的输出beautify: false,// 删除所有的注释comments: false,},compress: {// 在 UglifyJs 删除没有用到的代码时不输出警告warnings: false, // 删除所有的 console 语句，可以兼容 ie 浏览器drop_console: true,// 内嵌定义了但是只用到一次的变量collapse_vars: true,// 提取出出现多次但是没有定义成变量去引用的静态值reduce_vars: true,}},}),],
   };
   

Webpack v4

1. 安装 terser-webpack-plugin

   npm i terser-webpack-plugin
   

2. 配置 webpack.config.js

   // webpack.config.jsconst TerserPlugin = require("terser-webpack-plugin");module.exports = {optimization: {minimize: true,minimizer: [new TerserPlugin({parallel: 4,terserOptions: {parse: {ecma: 8,},compress: {ecma: 5,warnings: false,comparisons: false,inline: 2,},mangle: {safari10: true,},output: {ecma: 5,comments: false,ascii_only: true,},},})],},
   };
   

---

减少压缩体积

压缩 CSS - CssMinimizerWebpackPlugin

// webpack.config.jsconst CssMinimizerPlugin = require("css-minimizer-webpack-plugin");module.exports = {optimization: {minimizer: [new CssMinimizerPlugin({ parallel: 4, }),],}
}

---

分包 - SplitChunks

// webpack.config.jsmodule.exports = {optimization: {/*** 把 JS 文件打包成3中类型：* 1. vendor：第三方 lib 库，基本不会改动，除非依赖版本升级* 2. common：业务组件代码的公共部分抽取出来，改动较少* 3. entry.{page}：不同页面 entry 里业务组件代码的差异部分，会经常改动* 这样分的好处是尽量按改动频率来区分，利用好浏览器缓存*/splitChunks: {chunks: 'all',maxInitialRequests: 4, // 防止切分粒度过细，请求过多，约束为4cacheGroups: {vendor: { // 第三方test: /[\\/]node_modules[\\/]/, // 打包 node_module 中的文件name: 'vendor', // 模块名称priority: 10, // 优先级 数字越大 优先级越高enforce: true, // 强制执行reuseExistingChunk: true, // 重用已有模块},common: { // 公共模块name: 'common',minChunks: 2, // 被引用两处即被归纳到公共模块minSize: 1, // 最小 sizepriority: 5, // 优先级reuseExistingChunk: true, // 重用已有模块},},},// 将 webpack 运行时生成代码打包到 runtime.jsruntimeChunk: true,},
}

---

合并公共代码 - CommonsChunkPlugin

Webpack v4 移除，通过 optimization.splitChunks 替代。

// webpack.config.jsconst CommonsChunkPlugin = require('webpack/lib/optimize/CommonsChunkPlugin');module.exports = {plugins: [new CommonsChunkPlugin({chunks: ['common', 'base'], // 从 common 和 base 两个现成的 Chunk 中提取公共的部分name: 'base' // 把公共的部分放到 base 中})]
}

---

Tree Shaking

Tree Shaking 是指打包时移除哪些没有使用（未引入）的代码。

---

按需加载

1. 代码中通过 import() 按需加载 Chunk

   // main.jswindow.document.getElementById('btn').addEventListener('click', function () {// 当按钮被点击后才去加载 show.js 文件，文件加载成功后执行文件导出的函数import(/* webpackChunkName: "show" */ './show').then((show) => {show('Webpack');})
   });
   

2. 在 webpack.config.js 中配置动态 Chunk 的输出

// webpack.config.jsmodule.exports = {entry: {main: './main.js',},output: {filename: '[name].js',// 为动态加载的 Chunk 配置输出文件的名称chunkFilename: '[name].js',}
};

---

开启 Scope Hoisting

Scope Hoisting 可以让 Webpack 打包出来的代码文件更小、运行的更快， 它又译作 “作用域提升”，是在 Webpack3 中新推出的功能。

// webpack.config.js​
​
const ModuleConcatenationPlugin = require('webpack/lib/optimize/ModuleConcatenationPlugin');​
​
module.exports = {​resolve: {​// 针对 Npm 中的第三方模块优先采用 jsnext:main 中指向的 ES6 模块化语法的文件​mainFields: ['jsnext:main', 'browser', 'main']​},​plugins: [​// 开启 Scope Hoisting​new ModuleConcatenationPlugin(),​],​
};

---

优化二次打包时间

缓存

增加初次构建时间，缩短后续构建时间。

• 利用 cache-loader，HardSourceWebpackPlugin、babel-loader 的 cacheDirectory 标志等。
• cache

// webpack.config.jsmodule.exports = {cache: {type: 'filesystem',},
};

---

静态资源不再打包

DllPlugin

// webpack_dll.config.js - 构建出动态链接库文件const path = require('path');
const DllPlugin = require('webpack/lib/DllPlugin');
const DllReferencePlugin = require('webpack/lib/DllReferencePlugin');module.exports = {entry: {// 把 React 相关模块的放到一个单独的动态链接库react: ['react', 'react-dom'],// 把项目需要所有的 polyfill 放到一个单独的动态链接库polyfill: ['core-js/fn/object/assign', 'core-js/fn/promise', 'whatwg-fetch'],},output: {filename: '[name].dll.js',path: path.resolve(__dirname, 'dist'),// 存放动态链接库的全局变量名称，例如对应 react 来说就是 _dll_react// 之所以在前面加上 _dll_ 是为了防止全局变量冲突library: '_dll_[name]',},plugins: [// 接入 DllPluginnewDllPlugin({// 动态链接库的全局变量名称，需要和 output.library 中保持一致// 该字段的值也就是输出的 manifest.json 文件 中 name 字段的值// 例如 react.manifest.json 中就有 "name": "_dll_react"name: '_dll_[name]',// 描述动态链接库的 manifest.json 文件输出时的文件名称path: path.join(__dirname, 'dist', '[name].manifest.json'),}),],
};

// webpack.config.jsconst path = require('path');
const DllReferencePlugin = require('webpack/lib/DllReferencePlugin');module.exports = {plugins: [// 告诉 Webpack 使用了哪些动态链接库new DllReferencePlugin({// 描述 react 动态链接库的文件内容manifest: require('./dist/react.manifest.json'),}),new DllReferencePlugin({// 描述 polyfill 动态链接库的文件内容manifest: require('./dist/polyfill.manifest.json'),}),],
};

---

合理配置输出文件名

// webpack.config.jsmodule.exports = {output: {path: path.resolve(__dirname, '../dist'),// 给 js 文件加上 contenthashfilename: 'js/chunk-[contenthash].js',clean: true,},
}

区分环境

• 在开发环境中，切忌在开发环境使用生产环境才会用到的工具，例如：在开发环境下，应该排除 [fullhash]/[chunkhash]/[contenthash] 等工具。
• 在生产环境中，也应该避免使用开发环境才会用到的工具，例如：webpack-dev-server 等插件。

---

4. 完整优化配置

开发环境的配置文件 webpack.dev.config.js

// webpack.dev.config.jsconst path = require('path');
const CommonsChunkPlugin = require('webpack/lib/optimize/CommonsChunkPlugin');
const {AutoWebPlugin} = require('web-webpack-plugin');
const HappyPack = require('happypack');// 自动寻找 pages 目录下的所有目录，把每一个目录看成一个单页应用const autoWebPlugin = new AutoWebPlugin('./src/pages', {// HTML 模版文件所在的文件路径template: './template.html',// 提取出所有页面公共的代码commonsChunk: {// 提取出公共代码 Chunk 的名称name: 'common',},
});module.exports = {// AutoWebPlugin 会找为寻找到的所有单页应用，生成对应的入口配置，// autoWebPlugin.entry 方法可以获取到生成入口配置entry: autoWebPlugin.entry({// 这里可以加入你额外需要的 Chunk 入口base: './src/base.js',}),output: {filename: '[name].js',},resolve: {// 使用绝对路径指明第三方模块存放的位置，以减少搜索步骤// 其中 __dirname 表示当前工作目录，也就是项目根目录modules: [path.resolve(__dirname, 'node_modules')],// 针对 Npm 中的第三方模块优先采用 jsnext:main 中指向的 ES6 模块化语法的文件，使用 Tree Shaking 优化// 只采用 main 字段作为入口文件描述字段，以减少搜索步骤mainFields: ['jsnext:main', 'main'],},module: {rules: [{// 如果项目源码中只有 js 文件就不要写成 /\.jsx?$/，提升正则表达式性能test: /\.js$/,// 使用 HappyPack 加速构建use: ['happypack/loader?id=babel'],// 只对项目根目录下的 src 目录中的文件采用 babel-loaderinclude: path.resolve(__dirname, 'src'),},{test: /\.js$/,use: ['happypack/loader?id=ui-component'],include: path.resolve(__dirname, 'src'),},{// 增加对 CSS 文件的支持test: /\.css$/,use: ['happypack/loader?id=css'],},]},plugins: [autoWebPlugin,// 使用 HappyPack 加速构建new HappyPack({id: 'babel',// babel-loader 支持缓存转换出的结果，通过 cacheDirectory 选项开启loaders: ['babel-loader?cacheDirectory'],}),new HappyPack({// UI 组件加载拆分id: 'ui-component',loaders: [{loader: 'ui-component-loader',options: {lib: 'antd',style: 'style/index.css',camel2: '-'}}],}),new HappyPack({id: 'css',// 如何处理 .css 文件，用法和 Loader 配置中一样loaders: ['style-loader', 'css-loader'],}),// 提取公共代码new CommonsChunkPlugin({// 从 common 和 base 两个现成的 Chunk 中提取公共的部分chunks: ['common', 'base'],// 把公共的部分放到 base 中name: 'base'}),],watchOptions: {// 使用自动刷新：不监听的 node_modules 目录下的文件ignored: /node_modules/,}
};

生产环境的配置文件 webpack.prod.config.js

// webpack.prod.config.jsconst path = require('path');
const DefinePlugin = require('webpack/lib/DefinePlugin');
const ModuleConcatenationPlugin = require('webpack/lib/optimize/ModuleConcatenationPlugin');
const CommonsChunkPlugin = require('webpack/lib/optimize/CommonsChunkPlugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const { AutoWebPlugin } = require('web-webpack-plugin');
const HappyPack = require('happypack');
const ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin');// 自动寻找 pages 目录下的所有目录，把每一个目录看成一个单页应用
const autoWebPlugin = new AutoWebPlugin('./src/pages', {// HTML 模版文件所在的文件路径template: './template.html',// 提取出所有页面公共的代码commonsChunk: {// 提取出公共代码 Chunk 的名称name: 'common',},// 指定存放 CSS 文件的 CDN 目录 URLstylePublicPath: '//css.cdn.com/id/',
});module.exports = {// AutoWebPlugin 会找为寻找到的所有单页应用，生成对应的入口配置，// autoWebPlugin.entry 方法可以获取到生成入口配置entry: autoWebPlugin.entry({// 这里可以加入你额外需要的 Chunk 入口base: './src/base.js',}),output: {// 给输出的文件名称加上 Hash 值filename: '[name]_[chunkhash:8].js',path: path.resolve(__dirname, './dist'),// 指定存放 JavaScript 文件的 CDN 目录 URLpublicPath: '//js.cdn.com/id/',},resolve: {// 使用绝对路径指明第三方模块存放的位置，以减少搜索步骤// 其中 __dirname 表示当前工作目录，也就是项目根目录modules: [path.resolve(__dirname, 'node_modules')],// 只采用 main 字段作为入口文件描述字段，以减少搜索步骤mainFields: ['jsnext:main', 'main'],},module: {rules: [{// 如果项目源码中只有 js 文件就不要写成 /\.jsx?$/，提升正则表达式性能test: /\.js$/,// 使用 HappyPack 加速构建use: ['happypack/loader?id=babel'],// 只对项目根目录下的 src 目录中的文件采用 babel-loaderinclude: path.resolve(__dirname, 'src'),},{test: /\.js$/,use: ['happypack/loader?id=ui-component'],include: path.resolve(__dirname, 'src'),},{// 增加对 CSS 文件的支持test: /\.css$/,// 提取出 Chunk 中的 CSS 代码到单独的文件中use: ExtractTextPlugin.extract({use: ['happypack/loader?id=css'],// 指定存放 CSS 中导入的资源（例如图片）的 CDN 目录 URLpublicPath: '//img.cdn.com/id/'}),},]},plugins: [autoWebPlugin,// 开启ScopeHoistingnew ModuleConcatenationPlugin(),// 使用HappyPacknew HappyPack({// 用唯一的标识符 id 来代表当前的 HappyPack 是用来处理一类特定的文件id: 'babel',// babel-loader 支持缓存转换出的结果，通过 cacheDirectory 选项开启loaders: ['babel-loader?cacheDirectory'],}),new HappyPack({// UI 组件加载拆分id: 'ui-component',loaders: [{loader: 'ui-component-loader',options: {lib: 'antd',style: 'style/index.css',camel2: '-'}}],}),new HappyPack({id: 'css',// 如何处理 .css 文件，用法和 Loader 配置中一样// 通过 minimize 选项压缩 CSS 代码loaders: ['css-loader?minimize'],}),new ExtractTextPlugin({// 给输出的 CSS 文件名称加上 Hash 值filename: `[name]_[contenthash:8].css`,}),// 提取公共代码new CommonsChunkPlugin({// 从 common 和 base 两个现成的 Chunk 中提取公共的部分chunks: ['common', 'base'],// 把公共的部分放到 base 中name: 'base'}),new DefinePlugin({// 定义 NODE_ENV 环境变量为 production 去除 react 代码中的开发时才需要的部分'process.env': {NODE_ENV: JSON.stringify('production')}}),// 使用 ParallelUglifyPlugin 并行压缩输出的 JS 代码new ParallelUglifyPlugin({// 传递给 UglifyJS 的参数uglifyJS: {output: {// 最紧凑的输出beautify: false,// 删除所有的注释comments: false,},compress: {// 在 UglifyJs 删除没有用到的代码时不输出警告warnings: false,// 删除所有的 `console` 语句，可以兼容ie浏览器drop_console: true,// 内嵌定义了但是只用到一次的变量collapse_vars: true,// 提取出出现多次但是没有定义成变量去引用的静态值reduce_vars: true,}},}),]
};