webpack 优化构建速度的插件

news2025/2/20 15:43:06

1.HardSourceWebpackPlugin本地缓存

HardSourceWebpackPlugin这个插件比DLL动态链接库更优秀

HardSourceWebpackPlugin是webpack的插件，为模块提供中间缓存步骤。为了查看结果，您需要使用此插件运行webpack两次：第一次构建将花费正常的时间。第二次构建将显着加快（大概提升90%的构建速度）

安装

cnpm i hard-source-webpack-plugin

引入

const HardSourceWebpackPlugin = require('hard-source-webpack-plugin');

module.exports = { // ...... plugins: [ new HardSourceWebpackPlugin() // <- 直接加入这行代码就行 ] }

总结：

进行文件的热加载的，一个项目启动或者打包的时间，超过40s的时候，可以进行项目的优化和热加载。文件的加载，首先hard-source-webpack-plugin会进行文件的启动缓存，第一次启动之后，会给文件添加一次缓存，然后在第二次启动的时候，直接在本地缓存进行。打开的时候先去本地获取项目，优化非常猛项目启动时间少80%。

文件的打包，使用之后，加速打包大约在40%-50%左右

未优化前：

优化后：

1.1 hard-source-webpack-plugin和cache-loader的差异

建议使用hard-source-webpack-plugin优化工程

缓存方式：

cache-loader：cache-loader 主要是缓存 loader 的输出结果。它会缓存每个 loader 处理后的文件，以避免重复的编译过程。
hard-source-webpack-plugin：hard-source-webpack-plugin 则是提供了一个中间缓存，可以跨次构建持久化缓存模块和中间结果，以减少重复工作。
缓存粒度：

cache-loader：cache-loader 的缓存粒度是 loader 级别的，即每个 loader 处理的结果都可以被缓存。
hard-source-webpack-plugin：hard-source-webpack-plugin 的缓存粒度更大，可以缓存模块和中间结果，从而跨多个 loader 和构建过程。
缓存策略：

cache-loader：cache-loader 的缓存策略相对简单

hard-source-webpack-plugin 相对复杂

2 `webpack-bundle-analyzer生成报告`

是一个用于分析 webpack 打包结果的插件，它可以帮助开发者直观地了解打包后的文件大小、模块依赖关系等信息，从而进行优化。以下是使用 webpack-bundle-analyzer 的基本步骤

安装：

npm install --save-dev webpack-bundle-analyzer

配置：

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
plugins: [
new BundleAnalyzerPlugin({
analyzerMode: 'server', // 启动 HTTP 服务器以显示 bundle 报告
generateStatsFile: true, // 生成 stats.json 文件
// 其他配置项...
})
]
};

运行：

配置完成后，可以通过运行打包命令（如 npm run build 或 yarn build）来生成分析报告。如果配置了 generateStatsFile: true，则会在构建过程中生成 stats.json 文件。在服务器模式下，分析器会自动启动一个 HTTP 服务器，并在浏览器中打开报告。通过分析报告，可以直观地看到打包后的文件大小、模块依赖关系等信息。这有助于识别哪些模块占用了较多的空间，从而进行优化

3.`cache-loader`缓存构建结果

cache-loader 可以被用来缓存构建结果，以加快构建速度，它可以缓存 loader 的输出结果，避免重复耗时的编译过程。

安装：

npm install --save-dev cache-loader

配置：

module.exports = {
// ...
module: {
rules: [
{
test: /\.jsx?$/,
use: [
'cache-loader',
'babel-loader'
],
include: path.resolve('src')
},
]
}
// ...
};

或者这样的写法：

module.exports = {
// ...
module: {
rules: [
{

test: /\.vue$/,

use: [

{ loader: 'cache-loader' },

{ loader: 'vue-loader', options: vueLoaderConfig },

],

// loader: 'vue-loader',

// options: vueLoaderConfig

},

]
}
// ...
};

总结：

请注意，保存和读取这些缓存文件会有一些时间开销，所以请只对性能开销较大的 loader 使用此 loader。

4 CDN注入

4.1首先使用externals进行项目依赖提取

进行大文件的打包忽略

module.exports = {
configureWebpack: {
externals: {
vue: 'Vue',
'vue-router': 'VueRouter',
axios: 'axios',
echarts: 'echarts'
}
}

在index.html中使用CDN进行依赖大的引入

<body>
<script src="http://lib.baomitu.com/vue/2.6.14/vue.min.js"></script>
<script src="http://lib.baomitu.com/vue-router/3.5.1/vue-router.min.js"></script>
<script src="http://lib.baomitu.com/axios/1.2.1/axios.min.js"></script>
<script src="http://lib.baomitu.com/echarts/5.3.2/echarts.min.js"></script>
</body>

4.2缺点：CDN配置到服务器是要钱的

这个东西，CDN配置到服务器是要钱的，然后就是这个东西不稳定，服务器不稳定或者网络波动的时候，项目会卡顿

5.路由懒加载

webpack路由懒加载

在Webpack中实现路由的懒加载，可以使用动态导入语法，这是ECMAScript提供的一种新的import语法，可以将模块代码拆分成小块，按需加载。这样可以提高初始加载速度，并且只有在实际需要时才加载路由组件

// router.js
import Vue from 'vue';
import Router from 'vue-router';

Vue.use(Router);

export default new Router({
routes: [
{
path: '/home',
name: 'Home',
// 使用动态导入进行懒加载
component: () => import('@/components/Home.vue')
},
]
});