webpack打包体积优化
webpack打包的体积越小，对于部署应用的网站来说，性能越好，加载速度越快。
1. 分析打包文件
1. 生成统计信息文件
首先需要通过webpack命令生成统计信息的文件。在package.json的脚本中添加命令
"scripts": {
"stats": "webpack --config webpack.prod.js --profile --json > stats.json",
//...
}上面的命令会在根目录下生成一个stats.json的打包统计信息文件。
2. 可视化分析
使用插件可视化分析插件：webpack-bundle-analyzer
npm install --save-dev webpack-bundle-analyzer
配置插件的使用信息；
const BundleAnalyzerPlugin = require(‘webpack-bundle-analyzer‘).BundleAnalyzerPlugin;
module.export = {
//...
plugins: [
new BundleAnalyzerPlugin({
analyzerMode: ‘disabled‘, // 关闭默认启动的展示信息的http服务器
generateStatsFile: true // 打包的时候生成stats.json文件；
}),
}从上面配置信息可知，使用该插件，不需要再手动生成stats.json文件，第一步可以省略。
然后，在脚本中添加手动启动分析器的http
// 分析命令的使用，应该在打包命令之后。因为它的作用就是分析打包后的文件
"scripts": {
"build": "webpack --config webpack.prod.js",
"analyzer": "webpack-bundle-analyzer ./dist/stats.json --port 8081"
}3. 优化建议
将生成的stats.json文件拖入该网站https://webpack.jakoblind.no/optimize/。
会给出打包体积太大的优化措施。
该插件基于webpack-optimize-helper插件。
2. 抽离css并压缩
1.抽离css
使用mini-css-extract-plugin抽离css
npm install --save-dev mini-css-extract-plugin
在plugins配置文件中使用插件
module.exports = {
plugins: [
new MiniCssExtractPlugin({
filename: ‘css/[name].[contenthash:8].css‘ // 将css文件统一放入css文件夹
})
]
}2. 压缩css
使用optimize-css-assets-webpack-plugin压缩css文件
npm install -D optimize-css-assets-webpack-plugin
在optimization中使用该插件
module.exports = {
optimization: {
minimize: true,
minimizer: [
new OptimizeCssAssetsWebpackPlugin()
]
}3. 移除未使用的css
在大型项目中，经常会有很多样式内容，在代码中根本未使用，但是会被打包，这些样式需要打包时应该移除。
使用purgecss-webpack-plugin移除未使用的css样式。
npm i purgecss-webpack-plugin -D
在pluigns中配置插件
const glob = require(‘glob‘); // 根据路径查找文件
module.exports = { plugins:[
new PurgecssWebpackPlugin({ //paths要求是绝对路径
paths: glob.sync(`${path.join(__dirname, ‘src/**/*‘)}`, { nodir: true })
}) ]3. 复用babal转化时runtime代码
@babel/plugin-transform-runtime
?该插件的引入只能通过.babelrc文件，不能在babel-loader的options中，否则报错。
4. 使用CDN
1. 第三方库使用CDN
new HtmlWebpackExternalsPlugin({
externals: [
{
module: ‘lodash‘,
global: ‘_‘,
entry: ‘https://cdn.jsdelivr.net/npm//lodash.min.js‘
}
]
})然后为了避免用户在模块中手动又导入，需要添加
externals: {
lodash: ‘_‘
},2. 项目生成的静态文件可以部署到CDN服务器中
需要配置publicPath为CDN服务器的域名
// output， module->MiniCssWebpackLoader.loader, image等可以部署publicPath publicPath: ‘http://lyralee.com‘
5. webpack.IgnorePlugin
忽略第三方库中多余的文件夹。
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)
上面忽略了moment库中的语言包
6. 图片压缩image-webpack-loader
{
test: /\.(gif|png|jpe?g|svg)$/i,
use: [
{
loader: ‘url-loader‘,
options: {
limit: 2 * 1024,
outputPath: ‘images‘,
name: ‘[name].[contenthash:8].[ext]‘
}
},
{
loader: ‘image-webpack-loader‘,
options: {
mozjpeg: {
progressive: true,
quality: 65
},
// optipng.enabled: false will disable optipng
optipng: {
enabled: false
},
pngquant: {
quality: [0.65, 0.90],
speed: 4
},
gifsicle: {
interlaced: false
},
// the webp option will enable WEBP
webp: {
quality: 75
}
}
}
]
}7. 使用babel-polyfill的替代方案
如果项目中允许使用外部链接，可以使用
<script src="https://polyfill.io/v3/polyfill.min.js/"></script>
它按照浏览器类型返回需要的内容
8. TreeShaking
1. 原理：
1）利用es6模块的静态结构，依赖模块命令import/export，进行代码分析，分析出无用/永远不会访问的代码。
1)对于自己写的代码，禁止babel将esModule转为require
rules: [
{
test: /\.jsx?$/,
use: {
loader: ‘babel-loader‘,
options: {
// 设置{moduels: false} 则保留ES6的import/export
presets: [[‘@babel/preset-env‘, {modules: false}], ‘@babel/preset-react‘],
plugins: [
[‘@babel/plugin-proposal-decorators‘, {legacy: true}],
[‘@babel/plugin-proposal-class-properties‘, {loose: true}]
]
},
},
exclude: /node_modules/
}
]
2) 对于第三方库，要使用es模块的包, 如： lodash-es(有问题，先不用)
import {join } from ‘lodash-es‘2）通过terser-webpack-plugin移除分析出的多余代码
// ??只要写了optimization属性(即使是空)，即使是production，也不会启动该Terser插件 ； 如果是完整的配置，但是mode=development,该属性也不起作用
optimization: {
minimizer: [
new TerserWebpackPlugin({
parallel: true,
cache: true
})
],
...
},2. 注意事项
1. 要使TreeShaking起作用，必须使用ES6语法import/export 2. 减少sideEffects（副作用）代码的书写 3. 引入的第三方库，需要引入他们的ES版本
3. 特殊情形
当多入口文件存在时，只要有一个入口中使用了某方法，就不会被TreeShaking掉
9. 代码分割
1. 入口文件代码分割
entry: {
index: ‘./src/index.js‘,
vendors: [‘lodash‘]
}2. 动态import导入实现懒加载
当代码中触发使用import()动态引入文件时，会发起请求，并返回一个webpackJsonp方法，
该方法中实现代码的按需加载。
另外，React16.6.0中引入的React.lazy()就是基于该方法实现模块的代码分割和懒加载。
3. 使用splitChunks插件
splitChunks: {
cacheGroups: {
vendors: {
chunks: ‘initial‘, // 还有aysnc/all模式
name: ‘vendors‘, // 覆盖默认生成的名字
test: /node_modules/,
priority: -10, //优先级
minSize: 100*1024 // 生成单独文件的最小体积
},
commons: {
chunks: ‘initial‘,
name: ‘commons‘,
priority: -10,
minChunks: 2, // 被引用的模块的最少数量
minSize: 50*1024
}
}
}