项目优化--webpack性能优化篇

1、图片

module:{
	rules:{
	{
	test:/\.(png|jpg)$/,
	loader:'file-loader',//配置之后图片才能显示出来
	}
	}
}
//是如何让图片出来的?
//可以npm run build，看到
//就是将src中img的文件打包到dist文件根目录下

优化：可以将小图片打包成base64，大图片使用请求资源的方式，打包到img文件夹里（比如把小于5kb定义为小图片，把大于5kb定义为大图片）。

module:{
	rules:{
	{
	test:/\.(png|jpg)$/,
	use:{
		loader:'file-loader',//配置之后图片才能显示出来
		options:{
			limit:5*1024,
			outputPath:'/img/'
		}
	}
	}
	}
}

在再代码中使用lrz，更可以使图片压缩

import lrz from 'lrz'
lrz(files01[0].url, {quality:0.1})
//quality:图片压缩质量，默认是0.7

2、抽离css

在webpack.base.config.js中
webpack默认是不能对css文件进行打包，只能对js文件进行打包。

module:{
	rules:{
		test:/\.css$/,
		loader:[
		'style-loader',//将css放到页面<style></style>中
		'css-loader',//处理css文件之间依赖关系
		'postcss-loader'//处理css不能浏览器兼容性
	]
	}
}

但在生产环境中，css代码往往需要单独提取出来。
在webpack.prod.config.js中添加插件

const MiniCSSExtractPlugin = require('mini-css-extract-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const optimizeCSSAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')
const prodConfig = {
mode:"production",
module:{
...
rules:{
test:/\.css$/,
loader:{
//'style-loader',//将css放到页面<style></style>中
		MiniCSSExtractPlugin.loader,
		'css-loader',
		'postcss-loader'
}
}
},
plugins:[
	new MiniCSSExtractPlugin({
		filename:'css/main.[contentHash:8]css'//缓存
	})
],
optimization:{
	minimizer:[
	new TerserPlugin(),//压缩js
	new OptimizeCssAssetWebpackPlugin()//压缩css
]
}
}

3、按需加载

需求：1、网页首次加载时只加载首页的按钮
2、点击按钮才会加载下一个页面的内容
require.ensure(dep:array,cb:function,name?:string)方法
第一个参数是该模块的依赖，第二个参数是模块加载完成后执行的回调，第三个参数是output.chunkFilename:'[name].js’中的name。

//index.html
<button id="btn">点击我</button>

//index.js
document.querySelector('#btn').onclick = function(){
require.ensure([],function(){
	let a = require('./asynca.js')
	console.log('模块加载完成'，'a'),
},'asynca')
}

//asynca.js
console.log('我是模块asynca')
export a = 'asynca'

//webpack.config.js
moule.export={
entry:'./src/index.js',
ouput:{
filename:[name].[chunkHash].js,
chunkname:[name].[chunkHash].js,
publicPath:"./",
}
},
plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
      filename: 'index.html'
    })
  ]

4、热替换

在程序应用过程中，删除、替换、添加模块无需重新加载整个页面。

//webpack.config.js
const webpack = require('webbpack')
//webpack自带热模块替换插件 hot moudle replacement
...
plugins:[
...
new webpack.HotMoudleReplacementPlugin()//热替换插件
]

//devServer
devServer:{
...
hot:true
}

//index.js
if(moudle.hot){
 moudle.hot accept()
}

5、拆分webpack

build中建立三个webpack配置
webpack.base.config.js – 公共webpack配置
webpack.dev.config.js – 开发环境webpack配置
webpack.prod.config.js – 生产环境webpack配置
不同环境通过webpack-merge合并

6、如何使用webpack-dev-server

const commonConfig = require('./webpack.base.config');
const {smart:merge} = require('./webpack-merge');
const devConfig = {
mode:'development',
devServer:{
port:8080,//服务器启动端口
proxy:{//开发接口地址
'/Yixiantong':{
target:"http://study.jsplusjsplus.com",
changeOrigin:true
}
}

}
}
module.exports=merge(commonConfig,devConfig);