问题
在前端多页面(多html)开发的时候,使用webpack进行HMR热部署,但每一次修改之后,热部署持续很长的时间,而且页面越多,时间越长,观察可知大部分时间花在 asset optimization 这一步。每次修改都会触发所有页面的重新构建,但其实我们只需要更新修改的页面即可。
原因
使用 vue-cli 等脚手架搭建的时候,会默认在 webpack.dev.conf.js 中配置 html-webpack-plugin 模块,对于多页面,它需要配置所有页面,所以每次都会对所有 html 进行处理。
...
const HtmlWebpackPlugin = require('html-webpack-plugin')
...
for(let pathName in pages){
let options = {
filename: `${pathName}.html`,
template: pages[pathName],
inject: true,
chunks: [pathName]
}
// 需要配置所有 html,但因