浅析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
- ⚠️ 实验性的
2、hardSource
- 类型:
Boolean
- 默认:
false
- ⚠️ 实验性的
然后我们加上这2个配置之后
build: {
......
cache: true,
hardSource: true,
......
}
查看构建速度,确实快了很多
相关文章
- webpack打包提取css到独立文件
- [Webpack] Create Separate webpack Configs for Development and Production with webpack-merge
- [Webpack 2] Maintain sane file sizes with webpack code splitting
- [React + webpack] hjs-webpack
- 简要分析webpack打包后代码
- 使用 React和webpack开发和打包发布
- EasyDSS高性能RTMP、HLS(m3u8)、HTTP-FLV、RTSP流媒体服务器前端源码重构(四)- webpack + video.js 打造流媒体服务器前端
- js逆向8+9-浏览器指纹和node指纹,webpack,jsdom---基础结束,下面是进阶
- [Webpack] Externalize Dependencies to be Loaded via CDN with webpack
- [Webpack] Create Separate webpack Configs for Development and Production with webpack-merge
- [WASM] Create a New Rust/Webpack Project using the rust-webpack Template
- [Webpack + React] Import CSS Modules with TypeScript and webpack
- [Webpack 2] Hashing with Webpack for long term caching
- [Webpack 2] Validate your Webpack config with webpack-validator
- Webpack基础应用篇-[12] 1.9 缓存
- Webpack基础应用篇-[11] 1.8 代码分离
- 关于 webpack-dev-server 热更新出现重复的问题
- webpack 使用 extract-text-webpack-plugin 报错 Tapable.plugin is deprecated. Use new API on .hooks instead
- webpack - 基础配置教程
- Webpack中常见的Loader?解决了什么问题?