携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第3天，点击查看活动详情

背景

项目使用的是： Vue2 + Webpack

进过4年多的时间迭代，十几万的代码量，大几十的路由，繁多的CSS文件和图片，更是加载了本地的Word、Excel文件，臃肿巨大

每次npm run dev， 都是一种折磨。

每次npm run build，都是一种痛苦。

苦不堪言呀...

速度检测 - speed-measure-webpack-plugin

// 安装
npm install --save-dev speed-measure-webpack-plugin

问题剖析

那么，为什么随着项目的增大，构建的效率变得越来越慢了呢？

从截图不难看出，对于我们这样一个单页应用，构建过程中的大部分时间都消耗在编译 JavaScript 文件及 CSS 文件的各类  Loader 上。

本文不会详细描述 Webpack 的构建原理，我们只需要大致知道，Webpack 的构建流程，主要时间花费在递归遍历各个入口文件，并基于入口文件不断寻找依赖逐个编译再递归处理的过程，每次递归都需要经历 String->AST->String 的流程，然后通过不同的 loader 处理一些字符串或者执行一些 JavaScript 脚本，由于 NodeJS 单线程的特性以及语言本身的效率限制，Webpack 构建慢一直成为它饱受诟病的原因。

改变痛点 - hard-source-webpack-plugin

npm install hard-source-webpack-plugin -D

cli

修改 vue.config.js 配置文件：

const HardSourceWebpackPlugin = require('hard-source-webpack-plugin');\
module.exports = {
  ...
  configureWebpack: (config) => {
    // ...
    config.plugins.push(new HardSourceWebpackPlugin());\
  },
  ...
}

webpack

修改 webpack.base.conf.js 配置文件，或者webpack.conf.js

const HardSourceWebpackPlugin = require('hard-source-webpack-plugin');

module.exports = {
    plugins: [
        new HardSourceWebpackPlugin()
    ],
    ...
}

测试

经测试：

配置了 HardSourceWebpackPlugin 的首次构建时间，和预期的一样，并没有太大的变化

但是第二次启动时间从平均 2min 左右降到了平均 5s 左右，提升的幅度非常的夸张

当然，这个也因项目而异，但是整体而言，在不同项目中实测发现它都能比较大的提升开发时二次编译的效率。

build时间还是小2分钟，基本没有太大的改变。还有待优化

结语

如果帮助到你，请一键三连哦