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')
},
]
});
6. 静态资源预加载
是用户点击按钮时才加载这个资源的，如果资源体积很大，那么用户会感觉到明显卡顿效果 要优化这种情况，可以使用preload和prefetch技术
本站资源均来自互联网，仅供研究学习，禁止违法使用和商用，产生法律纠纷本站概不负责！如果侵犯了您的权益请与我们联系！
转载请注明出处： 免费源码网-免费的源码资源网站 » webpack 优化构建速度的插件
发表评论 取消回复