初级分析：使用webpack内置的stats
stats:构建统计信息
package.json中使用stats
"scripts": {
"build:stats":"webpack --env production --json > stats.json"
}
复制代码
指定输出的json对象，输出一个json文件
Node.js 中使用
const webpack = require('webpack')
const config = require('./webpack.config.js')('production')
webacpk(config, (err, stats) => {
if(err) {
return console.error(err);
}
if(stats.hasErrors()) {
return console.log(stats.toString("errors-only"))
}
console.log(stats);
})
复制代码
缺点：颗粒度太粗，看不出问题所在。
速度分析：使用speed-measure-webpack-plugin
const SpeedMeasureWebpackPlugin = require('speed-measure-webpack-plugin')
const smp = new SpeedMesurePlugin();
const webpackConfig = smp.wrap({
plugins: [
new MyPlugin();
new MyOtherplugin()
]
})
复制代码
速度分析插件作用
分析整个打包总耗时
每个插件和loader的耗时情况
体积分析：使用webpack-bundle-analyzer分析体积
const {BundleAnalyzerPlugin} =require('webpack-bundle-analyzer')
module.exports = {
plugins: [
new BundleAnalyzerPlugin()
]
}
复制代码
构建完成后会在8888端口展开大小
可以分析哪些问题?
依赖的第三方模块文件大小
业务里面的组件代码大小
多进程多实例构建
使用thread-loader解析资源
原理：每次webpack解析一个模块，thread-loader会将他及它的依赖分配给worker线程中
use:[
{
loader:'thread-loader',
options: {
workers: 3
}
}]
复制代码
多进程实例并行压缩
方法一：使用parallel-uglify-plugin插件
const ParalleUglifyPlugin = require('parallel-uglify-plugin')
module.exports = {
plugins: [
new ParalleUglifyPlugin({
uglifyJs:{
output: {
beautify:false,
comments:false,
},
compress:{
warnings: false,
drop_console:true,
collapse_vars:true,
reduce_vars:true
}
}
})
]
}
复制代码
方法二：uglifyjs-webpack-plugin开启parallel参数
plugins: [
new UglifyJsPlugin({
uglifyOptions:{},
parallel:true
})
]
复制代码
方法三(推荐)：terser-webpack-plugin开启parallel参数
module.exports = {
optimization: {
minimizer: [
new TerserPlugin({
parrallel:4
})
]
}
}
复制代码
进一步分包：预编译资源模块
思路：将react, react-dom, redux, react-redux基础包和业务基础打包成一个文件。
方法：创建一个单独的配置文件,一般命名为webpack.dll.js,使用DLLPlugin进行分包，DllReferencePlugin对manifest.json引用。
const path = require('path')
const webpack = requrie('webpack')
module.exports = {
context: process.cwd(),
resolve:{
extensions:['js', 'jsx', '.json', '.less', '.css'],
modules:[__dirname, 'node_modules']
},
entry: {
library: [
'react',
'react-dom',
'redux',
'react-redux']
},
output: {
filename: '[name].dll.js',
path: path.resolve(__dirname, './build/library'),
library: '[name]'
},
plugins: [
new webpack.Dllplygin({
name: '[name]',
path: './build/library/[name].json'
})
]
}
复制代码
在webpack.config.js引入
module.exports = {
plugins: [
new webpack.DllReferencePlugin({
mainfest:require('./build/library/mainfest.json')
})
]
}
复制代码
充分利用缓存提升二次构建速度
缓存思路：
babel-loader开启缓存
terser-webpack-plugin开启缓存
使用cache-loader或者hard-source-webpack-plugin
缩小构建目标
目的：尽可能的少构建模块
比如babel-laoder不解析node_modules
module.exports = {
rules: {
test: /\\.js$/,
loader: 'babel-loader',
exclude: 'node_modules'
}
}
复制代码
减少文件搜索范围
优化resolve.modules配置(减少模块搜索层级)
优化resolve.mainFields配置
优化resolve.extensions配置
合理使用alias
module.exports = {
resolve: {
alias: {
react: path.resolve(__dirname, './node_modules/react/dist/react.min.js')
},
modules: [path.resolve(__dirname, 'node_modules')],
extensions: ['js'],
mainFilelds:['main'],
}
}
复制代码
使用webpack进行图片压缩
要求： 基于Node库的imagemin或者tinypngAPI
使用： 配置image-webpack-loader
return {
test: /\\.(png|svg|jpg|gif)$/,
use: [{
loader:'file-loader'
options:{
name: `${filename}img/[name]${hash}.[ext]`
}
},{
loader:'image-webpack-loader',
options: {
mojpeg: {
progressive: true,
quality: 65
},
optipng: {
enabled: false,
} ，
pngquant: {
quality: '65-90',
speed: 4
}
}
}]
}
复制代码
imagemin的优点点分析
有很多定制选项
可以引入更多第三方优化插件，例如pngquant
可以处理多种图片格式
使用TreeShaking擦除无用的CSS沈阳治疗尖锐湿疣医院哪家好http://www.zzxb0371.com/
无用的CSS如何删除掉?
PurifyCSS：遍历代码，识别已经用到的CSS class
uncss:HTML需要通过jsdom加载， 所有的样式通过PostCSS解析，通过document.querySelector来识别在html文件里面不存在的选择器。
在webpack中如何使用PurifyCSS?
使用purgecss-webpack-webpack-plugin(www.npmjs.com/package/pur…)
和mini-css-extract-plugin配合使用
使用动态Polyfill服务沈阳治尖锐湿疣哪家好http://www.zzxb0371.com/
babel-polyfill(React16官方推荐)
polyfill-service(社区维护)
Polyfill Service原理
识别User Agent,下发不同的Polyfill