一、webpack的优化配置
1、Tree-shaking
移除 JavaScript 上下文中的未引用代码(dead-code)
基于ES6 import export
package.json中配置sideEffects，过滤 Tree-shaking文件
注意babel默认配置的影响，保留es6模块化语法
2、js压缩
webpack4后引入uglifyjs-webpack-plugin
支持es6替换为terser-webpack-plugin(生产模式默认使用的插件)
减小js文件体积
3、作用域提升
分析调用依赖，相同的依赖合并，代码体积减小
提高执行效率
注意babel默认配置的影响，保留es6模块化语法
4、Babel7优化配置
在需要的地方引入polyfill(js新语法兼容处理)
辅助函数的按需引入,@babel/plugin-transform-runtime插件
根据目标浏览器按需转换代码.配置 @babel/preset-env -> targets -> browsers
二、webpack的依赖优化
1、noParse 不解析
提高构建速度
直接通知webpack不解析较大的库
被忽略的库不能有import,require,define的引入方式
配置
// webpack.config.js
module: {
noParse: /lodash/ // lodash是被忽略的库
}
2、DLLPlugin 把经常重复使用的库，提取出来，变成一种引用的方式,这样就不用每次都构建这些库，加速构建过程。
避免打包时对不变的库重复构建，比如 react和vue相关
提高构建速度
配置
// webpack.dll.config.js 打包配置
const path = require("path");
const webpack = require("webpack");
module.exports = {
mode: "production",
entry: {
react: ["react", "react-dom"] // 库
},
output: {
filename: "[name].dll.js", // 文件名字
path: path.resolve(__dirname, "dll"), // 输出文件路径
library: "[name]" // 生成库的名称
},
plugins: [
new webpack.DLLPlugin({
name: "[name]",
path: path.resolve(__dirname, "dll/[name].manifest.json")
})
]
}
// package.json 添加scripts脚本
"dll-build": "NODE_ENV=production webpack --config webpack.dll.config.js"
// 执行打包命令 根目录会生成 dll 文件夹，里边有两个文件 react.dll.js react.manifest.json
npm run dll-build
// webpack.config.js 配置DLLReferencePlugin插件 引用刚才的打包文件库
new DLLReferencePlugin(
manifest: require(`${__dirname}/dll/react.manifest.json`)
)
三、基于webpack的代码拆分
代码拆分做什么
把单个bundle文件拆分成若干个小bundles/chunks
缩短首屏加载时间
splitChunks提取共有代码，拆分业务代码与第三方库
// webpack.config.js
const path = require("path");
const webpack = require("webpack");
module.exports = {
optimization: {
splitChunks: {
cacheGroups: {
vendor: {
name: 'vendor',
test: /[\\/]node_modules[\\/]/,
minSize: 0,
minChunks: 1,
priority: 10,
chunks: 'initial'
},
common: {
name: 'common',
test: /[\\/]src[\\/]/,
minSize: 0,
minChunks: 2,
chunks: 'all'
}
}
}
}
}
四、webpack的资源压缩
1、Terser压缩JS https://webpack.js.org/plugins/terser-webpack-plugin/#terseroptions
2、mini-css-extract-plugin压缩CSS https://webpack.js.org/plugins/mini-css-extract-plugin/#root
3、HtmlWebpackPlugin压缩HTML https://webpack.js.org/plugins/html-webpack-plugin/#root
五、基于webpack的资源持久化缓存
浏览器加载一个资源时，会缓存资源文件，如果文件地址没有变化，缓存机制生效，会优先从缓存中加载资源文件，而不是从服务端重新加载。
1、持久化缓存方案
每个打包的资源文件有唯一的hash值
修改后只有受影响的文件hash变化
充分利用浏览器缓存
// webpack.config.js
module.exports = {
output: {
path: `${__dirname}/build`,
filename: '[name].[hash].bundle.js', // 非按需加载 文件名 名字+hash
chunkFilename: '[name].[chunkhash:8].bundle.js' // 拆包的文件（按需加载） 名字+hash
},
plugins: [
new MiniCssExtractPlugin({
filename: '[name].[contenthash].css', // 根据内容生成hash值
chunkFilename: '[id].[contenthash:8].css'
})
],
};
六、基于webpack的应用大小监测与分析
1、Stats分析与可视化图 https://github.com/alexkuz/webpack-chart
2、source-map-explorer 体积分析 https://www.npmjs.com/package/source-map-explorer
3、webpack-bundle-analyzer体积分析 https://www.npmjs.com/package/webpack-bundle-analyzer
4、speed-measure-webpack-plugin 速度分析 https://www.npmjs.com/package/speed-measure-webpack-plugin