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 相对复杂

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 预加载资源-CSDN博客文章浏览阅读603次,点赞9次,收藏8次。webpack 预加载资源 减少首屏绘制时长https://blog.csdn.net/qq_37550440/article/details/139501533

点赞(0) 打赏

评论列表 共有 0 条评论

暂无评论

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部