美文网首页
web 前端性能优化

web 前端性能优化

作者: zackxizi | 来源:发表于2020-01-03 18:01 被阅读0次

一、webpack优化

  1. js 代码分割,设置未变动代码文件的 hash 值不变

    • 将不在开发中不会变动的代码,单独打包出来,比如 node_modules 内的插件

      // 入口文件main.js
      import _ from 'lodash'
      
      console.log(_.join([1, 2, 3, 4], '——'));
      
      // webpack的配置
      splitChunks: {
          chunks: "async", // 打包模块的引入类型 async:异步引入 initial:同步引入 all:上面两者
          minSize: 30000, // 最小大小的文件会被 代码分割 
          minChunks: 1, // 打包出来的js文件(chunk)中有多少chunk引用 就被分割打包,这里代表一个打包出来的chunk就被代码分割
          maxAsyncRequests: 5, // 最大异步引入个数 超出个数的不被分割
          maxInitialRequests: 3, // 最大同步引入个数 超出个数的不被分割
          automaticNameDelimiter: '~', // 组装名字中间的间隔符 下面cacheGroups 就被打包成 vendors~lodash.js
          name: true, // 允许自定义分割打包出来的名称
          cacheGroups: {
              vendors: {
                  test: /[\\/]node_modules[\\/]/, // 正则匹配
                  priority: -10, // 权重 如果比default中的priority大先执行这个 小的话先执行default里面的
              },
              default: {
                      minChunks: 2, // 打包出来的js文件(chunk)中有多少chunk引用 就被分割打包,这里代表2个打包出来的chunk就被代码分割
                      priority: -20, // 权重
                      reuseExistingChunk: true // 代码中如果引入 a模块 a模块依赖 b模块 。如果我们在代码中都使用了a和b 在分割打包的时候,如果会将 a 和 b模块在vendors打包了 ,当在引入b模块的时候,reuseExistingChunk: true 就不需要default重新分割打包了
                }
                }
        }   
      
      // webpack 出口配置 contenthash:这个是代码不发生变化的时候,hash值不变
      output: {
              filename: '[name]_[contenthash].js',
              path: path.join(__dirname, 'dist')
          }
      
    • js 代码分割,预取/预加载模块(prefetch/preload module)

      import(/* webpackPrefetch: true */ 'LoginModal'); // 在所有代码加载完之后,执行异步异加载
      import(/* webpackPreload: true */ 'ChartingLibrary'); 
      

待续.....

相关文章

  • Web前端性能优化,应该怎么做?

    想要成为一名合格的Web前端工程师,Web前端性能优化是一个必须要掌握的知识,那么应该怎么进行Web前端性能优化呢...

  • 前端性能优化(中)

    性能优化调研系列文章 《前端性能优化(上)》 《前端性能优化(中)》 《前端性能优化(下)》 《前端性能优化(上)...

  • 前端性能优化(下)

    性能优化调研系列文章 《前端性能优化(上)》 《前端性能优化(中)》 《前端性能优化(下)》 《前端性能优化(中)...

  • 前端性能优化

    js性能小贴士——优化循环 前端网页与js性能优化 我总结的js性能优化的小知识 提高 web 应用性能之 Jav...

  • 前端性能 优化 大全

    js性能小贴士——优化循环 前端网页与js性能优化 我总结的js性能优化的小知识 提高 web 应用性能之 Jav...

  • 前端性能优化(2)

    一.上文回顾 上回我们主要从图片的合并、压缩等方面介绍前端性能优化问题(详见Java Web 前端高性能优化(一)...

  • Java Web 前端高性能优化(二)

    一.上文回顾 上回我们主要从图片的合并、压缩等方面介绍前端性能优化问题(详见Java Web 前端高性能优化(一)...

  • 性能优化

    +WEB前端性能优化:HTML,CSS,JS和服务器端优化对前端开发工程师来说,前端性能优化的重要性是不言而喻的,...

  • 前端性能优化(上)

    性能优化调研系列文章 《前端性能优化(上)》 《前端性能优化(中)》 《前端性能优化(下)》 为什么要进行前端性能...

  • Web前端知识分享:3个优化Web性能的小技巧

    Web性能优化重不重要?相信每一个从事Web前端开发的人都会回答重要,毕竟Web性能优化好的网站可以给用户带来更好...

网友评论

      本文标题:web 前端性能优化

      本文链接:https://www.haomeiwen.com/subject/cvctactx.html