前端打包优化相关-Webpack
目录
前端打包优化相关 Webpack
前端打包优化相关 Webpack
打包时间的优化（基于 Vue CLI 4 + Webpack 5）
1. Webpack 配置减少打包时间
1.1 对 JS 配置：排除 node_modules 和 src 中的打包内容
在开发环境下，修改 Webpack 的 JS 规则，排除
/node_modules
和
src
目录中的 JavaScript 文件。这意味着
node_modules
和
src
目录中的 JavaScript 文件不会经过该规则定义的加载器处理（如 Babel 转译、ESLint 检查等）。
chainWebpack: (config) => {
// //编译时将项目的版本号作为一个全局常量ProjectVersion注入到代码中
config.plugin('define').tap((args) => {
args[0].ProjectVersion = JSON.stringify(ProjectVersion);
return args;
});
// 判断当前环境是否为开发环境
if (process.env.NODE_ENV === 'development') {
// 配置模块规则
config.module
.rule('js')
.exclude.add(resolve('/node_modules'))
.add(resolve('src'));
}
};1.2 创建 DLL 配置文件，对第三方插件提前打包到本地
1.2.1 配置打包 DLL 文件
const path = require('path');
const webpack = require('webpack');
module.exports = {
mode: 'production', // 设置为生产模式
entry: {
// 将第三方库分组打包
vue: ['vue', 'vue-router', 'vuex'],
elementUI: ['element-ui'],
axios: ['axios'],
lodash: ['lodash'],
},
output: {
path: path.resolve(__dirname, 'dll'), // 输出目录
filename: '[name].dll.js', // 输出文件名
library: '[name]_library', // 全局变量名
},
plugins: [
// 生成 manifest 文件
new webpack.DllPlugin({
name: '[name]_library', // 需要与 output.library 一致
path: path.resolve(__dirname, 'dll/[name]-manifest.json'), // manifest 文件路径
}),
],
};执行命令生成 DLL 文件：
npx webpack --config webpack.dll.config.js1.2.2 配置打包文件使用 DLL 文件并插入到模板中
configureWebpack: (config) => {
config.plugins.push(
// 引入分片的 DLL 文件
new webpack.DllReferencePlugin({
manifest: require(path.resolve(__dirname, 'public/dll/vue-manifest.json')),
}),
new webpack.DllReferencePlugin({
manifest: require(path.resolve(__dirname, 'public/dll/axios-manifest.json')),
}),
new webpack.DllReferencePlugin({
manifest: require(path.resolve(__dirname, 'public/dll/elementGui-manifest.json')),
}),
new webpack.DllReferencePlugin({
manifest: require(path.resolve(__dirname, 'public/dll/vueBaiduMap-manifest.json')),
}),
new webpack.DllReferencePlugin({
manifest: require(path.resolve(__dirname, 'public/dll/glodonTinymce-manifest.json')),
}),
new webpack.DllReferencePlugin({
manifest: require(path.resolve(__dirname, 'public/dll/elementChinaAreaData-manifest.json')),
}),
new webpack.DllReferencePlugin({
manifest: require(path.resolve(__dirname, 'public/dll/mintUi-manifest.json')),
}),
// 将分片的 DLL 文件添加到 HTML 模板中
new AddAssetHtmlPlugin([
{
filepath: path.resolve(__dirname, 'public/dll/vue.dll.js'),
publicPath: process.env.VUE_APP_PUBLIC_PATH, // 根据项目路径调整
},
{
filepath: path.resolve(__dirname, 'public/dll/axios.dll.js'),
publicPath: process.env.VUE_APP_PUBLIC_PATH,
},
{
filepath: path.resolve(__dirname, 'public/dll/vueBaiduMap.dll.js'),
publicPath: process.env.VUE_APP_PUBLIC_PATH,
},
{
filepath: path.resolve(__dirname, 'public/dll/elementGui.dll.js'),
publicPath: process.env.VUE_APP_PUBLIC_PATH,
},
{
filepath: path.resolve(__dirname, 'public/dll/glodonTinymce.dll.js'),
publicPath: process.env.VUE_APP_PUBLIC_PATH,
},
{
filepath: path.resolve(__dirname, 'public/dll/elementChinaAreaData.dll.js'),
publicPath: process.env.VUE_APP_PUBLIC_PATH,
},
{
filepath: path.resolve(__dirname, 'public/dll/mintUi.dll.js'),
publicPath: process.env.VUE_APP_PUBLIC_PATH,
},
])
);
},1.3 开启多线程打包
使用
thread-loader
可能会达不到效果，因为开启多线程也需要时间。
// 开启多线程打包
config.module
.rule('vue')
.use('thread-loader')
.loader('thread-loader')
.tap(() => {
return {
workers: os.cpus().length,
};
})
.before('vue-loader');1.4 删除无用的插件配置，去掉 sourceMap
chainWebpack: (config) => {
// 删除一些无用插件
config.plugins.delete('friendly-errors');
config.devtool = false; // eval|none source-map hidden-source-map // 不生成 sourceMap 源代码，减少体积，加快打包速度
};1.5 删除 console.log （生产环境），配置压缩 JS 和 CSS
// vue.config.js
const TerserPlugin = require('terser-webpack-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
module.exports = {
configureWebpack: {
optimization: {
minimize: true, // 启用压缩
minimizer: [
new TerserPlugin({
terserOptions: {
compress: {
drop_console: true, // 删除 console.log
pure_funcs: ['console.log'], // 只删除 console.log
},
format: {
comments: false, // 删除注释
},
},
extractComments: false, // 不提取注释到单独文件
}),
new CssMinimizerPlugin({
minimizerOptions: {
preset: [
'default',
{
discardComments: { removeAll: true }, // 删除所有注释
},
],
},
}),
],
},
},
};2. 如何减少 Webpack 打包体积
2.1 按需加载
按需加载可以减少初始加载的代码量，提升页面加载速度。
2.2 Scope Hoisting
Scope Hoisting 会分析出模块之间的依赖关系，尽可能将打包出来的模块合并到一个函数中，减少函数声明和闭包的开销。
2.3 Tree Shaking
Tree Shaking 会去除没有引用的代码，减少打包体积。
通过以上优化措施，可以有效减少 Webpack 打包时间和体积，提升项目性能。