在 Vue.js 开发中，webpack 是一个重要的构建工具。虽然它可以让我们轻松打包应用程序，但在项目较大时，webpack 打包速度可能会变得缓慢。所以在本文中，我们将介绍一些可以帮助优化 webpack 打包速度的技巧，以确保您的项目能够快速部署到生产环境中。
1. 减少 webpack 遍历的文件数量
开发人员经常会在项目根目录下创建许多不必要的文件，例如 node_modules 文件夹或公用目录等，而这些文件夹的内容又会被 webpack 扫描，导致打包时间变慢。因此，我们可以向 webpack 指定哪些文件夹和文件应该被排除，从而减少扫描的时间。
-- -------------------- ---- ------- ----- ---- - --------------- -------------- - - -- --- -- --------- ------- --- -------- - -------- ------------------------ ------- ---------------- ----------- ------- ------- --------- ------ - ---- ----------------------- ------ - -- -- --- -展开代码
上述代码中的 resolve 属性告诉 webpack 只扫描 src 目录以及 node_modules 目录下的模块，最好设定一个需要忽略的模块名称列表。
2. 开启多线程编译
我们都知道，webpack 会逐个编译文件，而这种方式会浪费大量的时间。因此，使用多线程编译将会大幅提高打包效率。
在 webpack 中，我们可以通过 HappyPack 或 thread-loader 实现多线程编译。HappyPack 可以让 webpack 在多个 CPU 核心中进行并行处理，而 thread-loader 则可以将耗时的（例如 babel 编译）任务放到单独的线程中进行处理。
以 thread-loader 为例，假设我们需要将 JavaScript 代码编译成 ES5 语法，可以这样配置：
-- -------------------- ---- ------- -------------- - - ------- - ------ - - ----- -------- ---- ----------------- ---------------- -------- -------------- - - - -展开代码
这样做将会将 babel-loader 进行多线程编译。
3. 按需加载
Vue.js 开发中，我们会采用组件化的方式进行开发，但是当我们在项目中使用过多的第三方组件库时，我们的打包文件就会变得异常庞大。因此，采用按需加载的方式引用第三方组件是一个很好的优化方式，可以帮助我们减少打包大小，提升用户体验。
以 Element-UI 库为例，我们可以通过 babel-plugin-component 根据需要加载组件：
-- -------------------- ---- ------- -- - -------- - ------------ ------- - ---------- - - ------------ - -------------- ------------- ------------------- ------------- - - - -展开代码
然后就可以按需引入组件：
import { Button } from 'element-ui' Vue.use(Button)
使用这种方法可以有效地减少打包的体积。
4. 使用 DllPlugin 或 Happypack
DllPlugin 可以将不会经常改变的第三方库（例如 vue、axios 等）与业务代码分离出来，这样可以减小打包的体积。
假设我们需要将 vue 和 lodash 打包成一个 dll 文件，可以如下指定：
-- -------------------- ---- ------- -- ---------------------- ----- ---- - ---------------- ----- ------- - ------------------- -------------- - - ------ - ------- ------- --------- -- ------- - ----- ----------------------- ----------- --------- ---------------------------- -------- -------------------- -- -------- - --- ------------------- ----- ----------------------- ---------- ------------------------------------ ----- --------------------- -------- --------- -- - --展开代码
然后再 webpack 配置文件中，引入 DllReferencePlugin：
-- -------------------- ---- ------- -- ------------------ ----- ------- - ------------------- ----- ---- - ---------------- -------------- - - -- --- -------- - --- ---------------------------- -------- ---------- --------- -------------------------------------- -- - --展开代码
使用 DllPlugin 使应用程序的编译速度得到显著的提高。
而 Happypack 则可以让 webpack 在多个 CPU 核心中进行并行处理，加快编译速度。以 babel-loader 为例，我们可以这样配置：
-- -------------------- ---- ------- ----- --------- - --------------------- ----- --------------- - ---------------------- ----- - --- -------------- - - -- --- ------- - ------ - - ----- -------- ------- --------------------------------- -------- -------------- - - -- -------- - --- ----------- --- ------------- -------- ----------------- ----------- ---------------- -------- ---- -- - --展开代码
5. 压缩代码
最后，我们可以使用 UglifyJS 等 JavaScript 压缩工具来对压缩代码进行压缩，将 JavaScript 代码的大小进行减小，从而缩短打包时间。
在 webpack 配置文件中，我们可以这样使用 UglifyJS：
-- -------------------- ---- ------- ----- -------------- - ---------------------------------- -------------- - - -- --- -------- - --- ---------------- ------ ----- --------- ----- ---------- ---- -- -- -- --- -展开代码
以上就是优化 Vue.js 中 webpack 打包速度的几种方式，希望可以帮助您加速项目的构建。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67beccac0c976d473a30e028
