浅析webpack如何优化项目构建速度及在NuxtJS里的应用加快Nuxt项目构建速度

　　在公众号深圳湾码农里看的一篇文章：一行可以让项目启动快 70% 以上的代码 - https://mp.weixin.qq.com/s/x8eFAFdTbzlCR1InxZSO2w

一、利用 cache 及 hard-source-webpack-plugin 优化构建速度

1、结果：将项目启动时间从48秒优化到14秒，大约70左右，效果还是有的，而且仅仅用了一行代码。

2、解决方案：缓存。

　　问题点就在于：如何更好的进行缓存。

3、hard-source-webpack-plugin，这插件为模块提供中间缓存步骤，但项目得跑两次，第一次构建时间正常，第二次大概能省去90%左右的时间

// 引入hard-source-webpack-plugin：
npm install --save-dev hard-source-webpack-plugin // 使用配置
const HardSourceWebpackPlugin = require('hard-source-webpack-plugin'); module.exports = { // ...... 
 plugins: [ new HardSourceWebpackPlugin() ] }

4、cache

chainWebpack: (config) => { config.cache(true) }

　　用chainWebpack的原因是项目中其实没有独立的webpack.config.js文件，所以只能放在vue.config.js文件中，使用chainWebpack来将配置插入到webpack中去。

5、HardSourceWebpackPlugin

chainWebpack: (config) => { config.plugin('cache').use(HardSourceWebpackPlugin) }

　　所以说hard-source-webpack-plugin失败的原因可能就是那两个统计插件的原因了，得亏再试了一次，要不然就不明不白的GG了。

6、结论：

（1）如果项目能使用hard-source-webpack-plugin就很方便了，直接使用config.plugin('cache').use(HardSourceWebpackPlugin)；

（2）如果用不了hard-source-webpack-plugin那就尝试webpack自带的cache功能也是不错的，虽然比不上hard-source-webpack-plugin，但多少也能提升70%左右的启动时间：config.cache(true)

　　这两种方法其实都是可行了，论稳定和效果的话hard-source-webpack-plugin还是更胜一筹，但cache胜在不用装额外的webpack插件，具体用什么就自己决定吧。

二、项目实战

　　我们项目采用 nuxtjs 服务端渲染，那么既然知道了解决方案，也可以在项目上应用起来。其实nuxt是有配置的。

1、cache

• 类型: Boolean
• 默认: false
• ⚠️ 实验性的

启用缓存 terser-webpack-plugin 和 cache-loader

2、hardSource

• 类型: Boolean
• 默认: false
• ⚠️ 实验性的

　　开启 HardSourceWebpackPlugin

　　然后我们加上这2个配置之后

build: {
　　...... cache: true, hardSource: true,
　　...... }

　　查看构建速度，确实快了很多