性能优化基本介绍:
webpack性能优化分为开发环境性能优化和生产环境性能优化。开发环境性能优化分为以下:
- 优化打包构建速度
- 优化代码调试
生产环境性能优化分为:
- 优化打包构建速度
- 优化代码运行的性能
HMR概念介绍:
模块热替换功能会在应用程序运行过程中替换、添加或删除模块,而无需重新加载整个页面。主要是通过一下几种方式来加快开发速度:- 只更新变更内容,以节省开发时间。
- 保留在完全重新加载页面时丢失的应用程序状态。
- 几乎相当于在浏览器中更改样式。
HMR在开发环境中使用
webpack.config.js中代码:
/**
* html文件:默认不能使用HMR功能,同时会导致问题:html文件不能热更新
* 解决:修改entry入口,将html文件引入
*
* css样式文件可以使用HMR功能:因为style-loader内部实现
*
* js文件:默认不能使用HMR功能 需要修改js代码,添加支持HMR功能的代码
* 注:HMR功能对js的处理,只能处理非入口js文件的其他文件。
*/
const HtmlWebpackPlugin = require('html-webpack-plugin');//默认会创建一个
var webpack = require('webpack');
const {resolve} = require('path');
const TerserPlugin = require('terser-webpack-plugin');
module.exports={
//修改entry入口以数组形式
entry:['./src/js/index.js','./src/index.html'],
output:{
filename:'built.js',
path:resolve(__dirname,'build')
},
module:{
rules:[
//loader的配置
{
//处理less资源
test:/\.less$/,
use:['style-loader','css-loader','less-loader']
},
{
//处理css资源
test:/\.css$/,
use:['style-loader','css-loader']
},
{
//处理图片资源
test:/\.(jpg|png|gif)$/,
loader:'url-loader',
options:{
limit:8*1024,
name:'[hash:10].[ext]',
//关闭es6模块化
esModules:false,
}
},
{
//处理html中img资源
test:/\.html$/,
loader:'html-loader'
},
{
//其他资源
exclude:/\.(html|js|css|less|jpg|png|gif)/,
loader:'file-loader',
options:{
name:'[hash:10].[ext]'
}
}
]
},
plugins:[
//plugins的配置
new HtmlWebpackPlugin({
template:'./src/index.html'
}),
],
devServer:{
contentBase:resolve(__dirname,'build'),
compress:true,
port:3000,
open:true,
//开启HMR功能
hot:true
}
}
index.js中代码:
import '../css/index.less'
import '../font/iconfont.css'
import './iconfont'
import print from './print'
function add(x,y){
return x+y;
}
console.log(1,2);
print();
//需要在入口js中添加以下代码
if(module.hot){
//module.hot为true说明开启了HMR功能
module.hot.accept('./print.js',function(){
//方法会监听print.js
print();
})
}