前端开发中，构建和打包是很常见的工作。但是随着项目代码规模的增大，构建时长也会越来越长，这给开发者带来很多不便。Webpack 是目前前端构建工具中最流行的一个，它有很多插件可以优化构建速度，这里介绍 DllPlugin 和 HappyPack 两个插件，并带有详细的使用示例。
DllPlugin
Webpack DllPlugin 插件允许我们单独进行一些库（比如 React、Vue、jQuery 等）的打包构建，而这些库只需构建一次就够了，以后每次打包时可以直接使用已打包好的库，大大减少了构建时间。
使用方法
安装 DllPlugin 插件
npm install --save-dev webpack webpack-cli webpack-dev-server webpack-manifest-plugin clean-webpack-plugin add-asset-html-webpack-plugin
在项目根目录创建一个
webpack.config.dll.js文件，并编写以下内容：-- -------------------- ---- ------- ----- ---- - ---------------- ----- - --------- - - ------------------- ----- - ------------------ - - -------------------------------- ----- -------------- - ----------------------------------- -------------- - - ------ - ------- --------- ------------ ---------- -- ------- - ----- ----------------------- --------- -------- --------- ------------ -------- --------- -- -------- - --- --------------------- --- ----------- ----- --------- ----- ----------------------- --------- ------- ------------------------ --- --- ----------------- -- --在
package.json中添加scripts命令：{ "scripts": { "webpack-dll": "webpack --config webpack.config.dll.js" } }运行
npm run webpack-dll命令打包，这会生成一个public/dist/目录，包括vendor.manifest.json和vendor.js两个文件。在
webpack.config.js中添加一下代码：-- -------------------- ---- ------- ----- ---- - ---------------- ----- ------- - ------------------- ----- - ------------------ - - -------------------------------- ----- ------------------ - ----------------------------------------- ----- ----------------- - ------------------------------- -------------- - - ------ ----------------- ------- - ----- -------------------- --------- -------- --------- --------- -- -------- - --- --------------------- --- -------------------- --- ---------------------------- --------- ------------------------------- --------- ------- ------------------------- --- --- -------------------- --------- ----------------------- --------- ------- -------- --- -- -------- - ------ - ------ ----------------------- --------------- --------- ------------ ----------------------- --------------- ------------- ------- ----------------------- --------------- ---------- -- -- --运行
npm start命令启动 webpack-dev-server，这里我们使用HtmlWebpackPlugin插件来自动生成index.html文件，使用AddAssetHtmlPlugin插件自动添加打包好的vendor.js文件到index.html中。
避坑提示
- 在
webpack.config.dll.js配置文件中，library的值必须和new DllPlugin()插件中的name值保持一致。 new AddAssetHtmlPlugin()插件、new HtmlWebpackPlugin()插件以及自定义生成的 HTML 文件原有的<script>标签总数量不能超过 1。
HappyPack
Webpack 原有的 loader 在进行构建时，每一个文件都会被一个子进程独立处理，这样就容易造成子进程过多，从而导致构建速度变慢。HappyPack 通过缓存处理和并行处理，大幅提高了构建速度，还可以配合 babel-loader、eslint-loader、css-loader 等 loader 使用，不仅适用于项目构建，对于开发阶段开发时使用 webpack-dev-server 也有一定效果。
使用方法
安装 HappyPack 插件
npm install --save-dev happypack
在
webpack.config.js中引入 HappyPack 插件：-- -------------------- ---- ------- ----- -- - -------------- ----- --------- - --------------------- -- ------ --- -- ----- ---- - ----------------- -------------- - - -- --------- ------- - ------ - - ----- ---------- -------- --------------- ---- -------------------------- -- - ----- --------- ---- -------------------------- -- -- -- -------- - -- --------- --- ----------- --- ------ -------- ----- -------- ------------------------------------- --- --- ----------- --- ------ -------- ----- -------- ---------------- -------------- --- -- --
避坑提示
threads参数不宜过大，这会导致每个子进程的内存占用量变大，甚至会出现内存溢出的问题。通常建议将threads置为当前系统 CPU 核心数。- 对于一些 loader 比如
babel-loader，需要在配置文件中添加参数?cacheDirectory=true，这样可以让 loader 缓存处理结果，减少重复处理，提高构建速度。
总结
以上就是使用 DllPlugin 和 HappyPack 优化构建的方法及示例，总体来说这两个插件在前端项目中使用非常广泛，可以大幅提升项目的构建速度和开发效率。但是需要注意，对于一个小型的、代码规模不是特别大的项目，使用这种优化方式可能带来的效果并不是很显著，而且还会增加项目的复杂度和维护成本。所以在使用这种优化方式之前，一定要先评估一下项目的规模和特点，再决定是否使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6482ca0a48841e9894225947