zoukankan      html  css  js  c++  java
  • 初探webpack4--简单理解打包优化

    webpack打包优化技巧
      优化打包速度:
      影响打包速度: 文件多、依赖多

      1、减少文件搜索范围
        (1) 优化resolve.extensions配置
          在导入语句没带文件后缀时,webpack会自动带上后去尝试询问文件是否存在在配置resolve.extensions时你需要要遵守一下几点,以做到尽可能的优化构建性能:后缀尝试列表要尽可能的小,不要把项目中不可能存在的情况写到后缀尝试列表中频率出现最高的文件后缀要优先放在最前面,以做到尽快的退出寻找过程在源码中写导入语句时,尽可能的带上后缀,避免寻找过程
        (2)优化resolve.modules配置
          resolve.modules 用于配置webpack去哪些目录下寻找第三方模块
          resolve.modules 默认值是['node_modules'],会采用向上递归搜索的方式查找 所以直接设置 绝对路径可以减少搜索步骤

          function resolve (dir) {
            return path.join(__dirname, '..', dir)
          }

          resolve: {
            modules: {
              resolve('node_modules')
            }
          }
        (3)优化resolve.alias 配置
          resolve.alias配置项通过别名来把原导入路径映射成一个新的导入路径
          使用好的别名可以减少递归操作
        (4)缩小文件匹配范围
          Include: 需要处理的文件的位置
          EXclude: 排除不需要处理的文件的位置

      2、设置noParse
          modules 中的一个参数
            防止webpack解析哪些任何与给定正则表达式相匹配的文件,忽略的文件中不应该含有的import require define的调用,或任何其他导入机制,忽略大型的library可以提高构建性能      

            eg: modules: {

              noParse:/jquery|lodash/

            }
          给babel-loader设置缓存
            babel-loader提供了cacheDirectory特定选项(默认false),设置时给定目录将用于缓存加载器的结果
            use: {
              loader: 'babel-loader?cacheDirectory=true'
            }
      3、使用happyPack
        基本原理:在webpack构建过程中,我们需要使用loader对js,css,图片,字体等文件做转换操作,并且转换的文件数据量也是非常大的,且这些转换操作不能并发处理文件,而是需要一个个文件进行处理happyPack的基本原理是将这部分任务分解到多个子进程中并行处理,子进程处理完成后把结果发送到主进程中,从而减少总的构建时间
        (1)安装:
          npm install happypack --save-dev
        (2)配置webpack.common.config.js
          引入happyPack
            const HappPack = require('happypack')
          Rules配置:
            {
              test: '/.js$/',
              exclude: 'node_module',
              loader: 'happypack/loader?id=happyBabel'
            }
          plugins配置
            plugins:{
              new HappyPack({
                id: 'happyBabel',
                loaders: [
                  {
                    loader: ['babel-loader?cacheDirectory=true']
                  }

                ]
              })
            }

  • 相关阅读:
    数据可视化之DAX篇(二十)Think in DAX 之报表自动化实践
    数据可视化之DAX篇(十九)值得你深入了解的函数:SUMMARIZE
    数据可视化之DAX篇(十八)收藏 | DAX代码格式指南
    数据可视化之DAX篇(十七)Power BI表格总计行错误的终极解决方案
    atomic_compare_exchange_weak_explicit (Atomic operations) – C 中文开发手册
    Spring Boot的How-to指南:嵌入式Web服务器
    C# 文本文件的读写
    CSS outline 属性
    operator (Numeric & Mathematical) – Python 中文开发手册
    HTML DOM Style animationDirection 属性
  • 原文地址:https://www.cnblogs.com/webtaotao/p/12108297.html
Copyright © 2011-2022 走看看