一、使用高版本的node和webpack
使用高板本的webpack和node时，构建速度会体哦啊高60%~98%
二、webpack4的优化
-
v8引擎的优化，for of代替forEach、Map和Set代替Object，includes代替indexOf。
-
md4代替md5算法，因为md4算法速度更快。
-
webpack AST直接通过loader传递给AST，减少解析的时间。
-
使用字符串方法代替正则表达式，因为正则表达式的执行速度更慢。
三、多实例/多进程
1、构建速度优化（多进程）
- HappyPack（已经不再维护）
代码：
使用yarn add happypack下载之后，在plugins中加入：
new HappyPack({ id: "js", threads: 3, loaders: ["babel-loader"], }),
原理：
代码交给webpack之后，经过HappyLoader处理，交给HappyPlugin进行初始化，并创建线程池，随后分配线程池，比如将一个模块和其依赖的模块交给该线程池进行处理，子进程处理完之后，会将处理的结果交给主进程。
- threat-loader（推荐使用）
thread-loader的使用跟其他loader的使用方法一致，但是它要放在js的所有loader之前，比如：
{ test: /\.js$/, use: ["thread-loader", "babel-loader"] },
-
paraller-webpack（配置相比于thread-laoder比较复杂，所以建议使用thread-loader）
2、分包
- 设置Externals
使用yarn add html-webpack-externals-plugin下载，并在Plugins中加入:
new HtmlWebpackExternalsPlugin({ externals: [{
module: "react",
entry: "https://unpkg.com/react@16/umd/react.development.js",
global: "React"
}], }),
使用该插件的问题有两点：
第一点，打包之后，会将该react以script标签的形式插入到index.html中，所以一旦分多个包们就会有多个script。
第二点，externals是一个数组，数组成员是对象，每一个第三方包要单独拆出去时，都要再配置一个对象，比如react-dom就要再配置一个对象。
- 预编译资源模块
思路：将react、react-dom、redux等基础包打包成一个文件。
方法：使用DllPlugin进行分包，使用DllReferencePlugin对manifest.json文件进行引用。
代码：
创建一个webpack.dll.congfig.js
const path = require("path");const webpack = require("webpack");module.exports = { context: process.cwd(), resolve: { extensions: [".js"] }, entry: { library: ["react", "react-dom"], }, output: { filename: "[name].dll.js", path: path.join(__dirname, "./dll/libaray"), library: "[name]", }, plugins: [ new webpack.DllPlugin({ name: "[name]", path: path.join(__dirname, "./dll/libaray/[name].json"), }), ],};
webpack.config.js文件的plugins中增加：
new webpack.DllReferencePlugin({ context: __dirname, manifest: require("./dll/libaray/library.json"), scope: "xyz", sourceType: "commonjs2", }),
package.json增加：
"build": "rimraf ./dist && yarn dll && webpack --config webpack.config.js","dll": "webpack --config webpack.dll.config.js"
使用yarn build即可，会生成一个dll/library/library.json和dll/library/library.js文件。
json文件中保存的是拆分出来的包的信息列表。
四、缓存
-
babel-loader开启缓存
-
terser-webpack-plugin开启缓存
-
cache-loader或者hard-source-webpack-plugin开启缓存
五、缩小构建目标
- 使用alias缩小构建目标
- 使用exclude排除一下文件，减少文件查找
- resolve.modules指定文件查找的范围
- resolve.mainFileds值为['main']，指定项目的入口文件为package.json的main的值
- resolve.extensions指定查找的文件扩展名
