精华内容
下载资源
问答
  • webpack4打包速度优化
    2021-08-01 18:37:12

     

    let config = {
      externals: {
        react: 'window.React',
        'react-dom': 'window.ReactDOM',
      },
      scripts: [
        'https://gw.alipayobjects.com/os/lib/react/16.13.1/umd/react.production.min.js',
        'https://gw.alipayobjects.com/os/lib/react-dom/16.13.1/umd/react-dom.production.min.js',
      ],
    
      //减少对部分版本的依赖
      targets: {
        ie: 11,
    
        // chrome: 49,
        // firefox: false, //默认10
        // safari: false, //默认13
        // edge: false,//默认13
        // ios: false,//默认10
      },
    
      //编辑时对node_modules 中的文件不经过babel 编译
      nodeModulesTransform: {
        type: 'none',
        exclude: [],
      },
    
      //开启chunks,抽离node_modules 中的被引用的重复方法
      chunks: ['vendors', 'umi'],
      chainWebpack: function (config, { webpack }) {
        config.merge({
          optimization: {
            splitChunks: {
              chunks: 'all',
              minSize: 20000,
              minChunks: 3,
              automaticNameDelimiter: '_',
              cacheGroups: {
                vendor: {
                  name: 'vendors',
                  test: /[\\/]node_modules[\\/]/,
                  priority: 10,
                },
              },
            },
          },
        });
      },


     

    更多相关内容
  • webpack4打包优化

    2020-08-07 14:52:13
    title: webpack4打包优化 categories: webpack tags: webpack4打包优化 针对vue cli3.0+,webpack4.0+,nodejs10.0+ 这几个版本打包优化 一、量化、分析 speed-measure-webpack-plugin 时间分析 测量出在你的构建...

    layout: post
    title: webpack4打包优化
    categories: webpack
    tags:

    webpack4打包优化

    针对vue cli3.0+,webpack4.0+,nodejs10.0+ 这几个版本打包优化

    一、量化、分析

    speed-measure-webpack-plugin 时间分析

    • 测量出在你的构建过程中,每一个 Loader 和 Plugin 的执行时长
    • 而它的使用方法也同样简单,如下方示例代码所示,只需要在你导出 Webpack 配置时,为你的原始配置包一层 smp.wrap 就可以了,接下来执行构建,你就能在 console 面板看到如它 demo 所示的各类型的模块的执行时长

    demo

    在这里插入图片描述

    安装

    npm i speed-measure-webpack-plugin -D
    

    使用

    vue.config.js中配置

    const SpeedMeasurePlugin = require('speed-measure-webpack-plugin')
    const smp = new SpeedMeasurePlugin({
      outputFormat: 'human'
    })
    module.exports = {
      configureWebpack: smp.wrap({
        plugins: []
      })
    }
    

    webpack-bundle-analyzer 体积分析

    • 分析打包后,各个文件的大小,用于分析 bundle 的
      在这里插入图片描述

    安装

    npm i webpack-bundle-analyzer -D
    

    使用

    const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
    module.exports = {
    configureWebpack: {
       plugins: [
          new BundleAnalyzerPlugin({
            //  可以是`server`,`static`或`disabled`。
            //  在`server`模式下,分析器将启动HTTP服务器来显示软件包报告。
            //  在“静态”模式下,会生成带有报告的单个HTML文件。
            //  在`disabled`模式下,你可以使用这个插件来将`generateStatsFile`设置为`true`来生成Webpack Stats JSON文件。
            analyzerMode: 'server',
            //  将在“服务器”模式下使用的主机启动HTTP服务器。
            analyzerHost: '127.0.0.1',
            //  将在“服务器”模式下使用的端口启动HTTP服务器。
            analyzerPort: 8888, 
            //  路径捆绑,将在`static`模式下生成的报告文件。
            //  相对于捆绑输出目录。
            reportFilename: 'report.html',
            //  模块大小默认显示在报告中。
            //  应该是`stat`,`parsed`或者`gzip`中的一个。
            //  有关更多信息,请参见“定义”一节。
            defaultSizes: 'parsed',
            //  在默认浏览器中自动打开报告
            openAnalyzer: true,
            //  如果为true,则Webpack Stats JSON文件将在bundle输出目录中生成
            generateStatsFile: false, 
            //  如果`generateStatsFile`为`true`,将会生成Webpack Stats JSON文件的名字。
            //  相对于捆绑输出目录。
            statsFilename: 'stats.json',
            //  stats.toJson()方法的选项。
            //  例如,您可以使用`source:false`选项排除统计文件中模块的来源。
            //  在这里查看更多选项:https:  //github.com/webpack/webpack/blob/webpack-1/lib/Stats.js#L21
            statsOptions: null,
            logLevel: 'info' // 日志级别。可以是'信息','警告','错误'或'沉默'。
          })
        ]
      },
    }
    

    二、缓存

    webpack缓存的插件有两个

    • DllPlugin 配置比较繁琐
    • hard-source-webpack-plugin

    DllPlugin

    提取固定三方库预编译,减少打包体积,加快编译速度

    使用

    • 在项目根目录下新建 webpack.dll.conf.js,输入以下内容
    const path = require('path')
    const webpack = require('webpack')
    const CleanWebpackPlugin = require('clean-webpack-plugin')
    
    // dll文件存放的目录
    const dllPath = 'public/vendor'
    
    module.exports = {
      entry: {
        // 需要提取的库文件
        vendor: [
          'vue-router/dist/vue-router.esm.js',
          'vuex/dist/vuex.esm.js',
          'axios',
          'mint-ui',
          'echarts',
          'toastr',
          'mockjs',
          'es6-promise'
        ]
      },
      output: {
        path: path.join(__dirname, dllPath),
        filename: '[name].dll.js',
        // vendor.dll.js中暴露出的全局变量名
        // 保持与 webpack.DllPlugin 中名称一致
        library: '[name]_[hash]'
      },
      plugins: [
        // 清除之前的dll文件
        new CleanWebpackPlugin(['*.*'], {
          root: path.join(__dirname, dllPath)
        }),
        // 设置环境变量
        new webpack.DefinePlugin({
          'process.env': {
            NODE_ENV: 'production'
          }
        }),
        // manifest.json 描述动态链接库包含了哪些内容
        new webpack.DllPlugin({
          path: path.join(__dirname, dllPath, '[name]-manifest.json'),
          // 保持与 output.library 中名称一致
          name: '[name]_[hash]',
          context: process.cwd()
        })
      ]
    }
    
    • 在 package.json 中加入如下命令,生成dll
    "scripts": {
        ...
        "dll": "webpack -p --progress --config ./webpack.dll.conf.js"
    }
    

    配置完成以后运行命令

    npm run dll
    

    在这里插入图片描述

    • 为了节约编译的时间,这时间我们需要告诉 webpack 公共库文件已经编译好了,减少 webpack 对公共库的编译时间。在项目根目录下找到 vue.config.js,配置如下
    const webpack = require('webpack')
    
    module.exports = {
        configureWebpack: {
            plugins: [
              new webpack.DllReferencePlugin({
                context: process.cwd(),
                manifest: require('./public/vendor/vendor-manifest.json')
              })
            ]
        }
    }
    
    
    • 经过上面的配置,公共库提取出来了,编译速度快了,但需要在index.html引用生成的 dll 文件
    <script src="./vendor/vendor.dll.js"></script>
    
    • 不想手动引入也可以 vue.config.js 在 configureWebpack plugins 节点下,配置 add-asset-html-webpack-plugin
    const path = require('path')
    const webpack = require('webpack')
    const AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin')
    
    module.exports = {
        ...
        configureWebpack: {
            plugins: [
              new webpack.DllReferencePlugin({
                context: process.cwd(),
                manifest: require('./public/vendor/vendor-manifest.json')
              }),
              // 将 dll 注入到 生成的 html 模板中
              new AddAssetHtmlPlugin({
                // dll文件位置
                filepath: path.resolve(__dirname, './public/vendor/*.js'),
                // dll 引用路径
                publicPath: './vendor',
                // dll最终输出的目录
                outputPath: './vendor'
              })
            ]
        }
    }
    
    

    打包速度

    • 打包前
      在这里插入图片描述

    • 打包后
      在这里插入图片描述

    包大小(最大的包echarts被移出并预编译)

    • 打包前

    在这里插入图片描述

    • 打包后
      在这里插入图片描述

    • 打包前
      在这里插入图片描述

    • 打包后
      在这里插入图片描述

    hard-source-webpack-plugin

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

    npm i webpack-bundle-analyzer -D
    
    const HardSourceWebpackPlugin = require('hard-source-webpack-plugin')
    module.exports = {
      configureWebpack: smp.wrap({
        plugins: [
          // 为模块提供中间缓存,缓存路径是:node_modules/.cache/hard-source
          new HardSourceWebpackPlugin(),
        ]
      })
    }
    

    tips: webpack5.0会把hard-source-webpack-plugin内置成一个配置。

    三、多进程多实例构建,资源并行解析

    • webpack需要处理的文件是非常多的,构建过程是一个涉及大量文件读写的过程。项目复杂起来了,文件数量变多之后,webpack构建就会特别满,而且运行在nodeJS上的webpack是单线程模型的,也就是说Webpack一个时刻只能处理一个任务,不能同时处理多个任务。

    • 文件读写和计算操作是无法避免的,那能不能让Webpack在同一时刻处理多个任务发挥多核CPU电脑的功能,以提升构建速度呢

    多进程构建的方案比较知名的有以下三个

    • thread-loader (推荐使用这个)
    • HappyPack
    • parallel-webpack

    thread-loader

    webpack4 官方提供了一个thread loader

    把这个 loader 放置在其他 loader 之前, 放置在这个 loader 之后的 loader 就会在一个单独的 worker【worker pool】 池里运行,一个worker 就是一个nodeJS 进程【node.js proces】,每个单独进程处理时间上限为600ms,各个进程的数据交换也会限制在这个时间内。

    配置长这样:

    npm i thread-loader -D
    
    module.exports = {
      configureWebpack: smp.wrap({
        module: {
          rules: [
            {
              test: /\.js$/,
              include: path.resolve("src"),
              use: [{
                loader: "thread-loader",
                // loaders with equal options will share worker pools
                // 设置同样option的loaders会共享
                options: {
                  // worker的数量,默认是cpu核心数
                  workers: 2,
    
                  // 一个worker并行的job数量,默认为20
                  workerParallelJobs: 50,
    
                  // 添加额外的node js 参数
                  workerNodeArgs: ['--max-old-space-size=1024'],
    
                  // 允许重新生成一个dead work pool
                  // 这个过程会降低整体编译速度
                  // 开发环境应该设置为false
    
                  poolRespawn: false,
    
                  //空闲多少秒后,干掉work 进程
                  // 默认是500ms
                  // 当处于监听模式下,可以设置为无限大,让worker一直存在
                  poolTimeout: 2000,
    
                  // pool 分配给workder的job数量
                  // 默认是200
                  // 设置的越低效率会更低,但是job分布会更均匀
                  poolParallelJobs: 50,
    
                  // name of the pool
                  // can be used to create different pools with elsewise identical options
                  // pool 的名字
                  //
                  name: "my-pool"
                }
              },
              // your expensive loader (e.g babel-loader)
            ]}
          ]
        }
      })
    }
    

    经过测试,thread-loader 对于打包速度几乎没有影响,是因为它本身的额外开销导致,建议只在极高性能消耗的场景下使用

    HappyPack

    将任务分解给多个子进程去并发执行,子进程处理完后再将结果发给主进程

    安装

    npm i happypack -D
    

    使用

    const HappyPack = require('happypack');
    const os = require('os');
    const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length });
    
    module.exports = {
      configureWebpack: smp.wrap({
        plugins: [
          new HappyPack({
            id: 'babel',
            loaders: ['babel-loader?cacheDirectory=true'],
            threadPool: happyThreadPool
          })
        ]
      }),
      chainWebpack: config => {
    		const jsRule = config.module.rule('js');
        jsRule.uses.clear();
        jsRule.use('happypack/loader?id=babel')
          .loader('happypack/loader?id=babel')
          .end();
    	}
    }
    
    

    经过测试,在我们的项目中,对 js 和 ts 文件使用 happypack 收益最大
    需要注意的是,Vue-loader 不支持 happypack

    四、多进程多实例并行压缩

    • 使用 parallel-uglify-plugin 插件
    • uglifyjs-webpack-plugin 开启 parallel 参数
    • terser-webpack-plugin 开启 parallel 参数 (推荐使用这个,支持 ES6 语法压缩)

    uglifyjs-webpack-plugin

    通过开启 cache 配置开启我们的缓存功能,也可以通过开启 parallel 开启多核编译功能

    安装

    npm i terser-webpack-plugin -D
    

    使用

    const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
    
    module.exports = {
      configureWebpack: smp.wrap({
        optimization: {
          minimizer: [
            new UglifyJsPlugin({
              uglifyOptions: {
                warnings: false,
                parse: {},
                // 删除console debugger 删除警告
                compress: {
                  warnings: false,
                  drop_console: true,//console
                  drop_debugger: false,
                  pure_funcs: ['console.log']//移除console
                },
                mangle: true,
                // 删除注释
                output:{
                  comments:false
                },
                toplevel: false,
                nameCache: null,
                ie8: false,
                keep_fnames: false
              },
              cache: true,
              parallel: true
            })
          ]
        }
      })
    }
    

    五、其他

    另外还有一些关于css打包体积的优化

    抽离css

    安装

    npm install --save-dev mini-css-extract-plugin
    

    使用

    const MiniCssExtractPlugin = require('mini-css-extract-plugin');
    
    module.exports = {
      plugins: [
        new MiniCssExtractPlugin({
          filename: 'css/[name].[contenthash:8].css'  // 将css文件统一放入css文件夹
        })
      ]  
    }
    

    压缩css

    安装

    npm install -D optimize-css-assets-webpack-plugin
    

    使用

    const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
    
    module.exports = {
      optimization: {
        minimize: true,
        minimizer: [
            new OptimizeCssAssetsWebpackPlugin()
        ]
      }
    }
    
    • 抽离css和压缩css后打包的速度

    在这里插入图片描述

    移除未使用的css

    • 在大型项目中,经常会有很多样式内容,在代码中根本未使用,但是会被打包,这些样式需要打包时应该移除

    安装

    npm i purgecss-webpack-plugin -D
    

    使用

    const PurgecssWebpackPlugin = require('purgecss-webpack-plugin');
    const glob = require('glob'); // 根据路径查找文件
    module.exports = {
      plugins:[
        new PurgecssWebpackPlugin({ //paths要求是绝对路径
          paths: glob.sync(`${path.join(__dirname, 'src/**/*')}`, { nodir: true })
        })
      ]
    }
    
    展开全文
  • (2)作用 (1)使用 webpack4优化原因: (1)资源并行解析可选方案 (2) 使用 HappyPack 解析资源 1、原理:每次 webapck 解析一个模块,HappyPack 会将它及它的依赖分配给 worker 线程中 2、使用 (2)使用 ...

    一、webpack速度分析:speed-measure-webpack-plugin

    (1)使用 

    const SpeedMeasureWebpackPlugin = require('speed-measure-webpack-plugin');
    const smp = new SpeedMeasureWebpackPlugin();
    const webpackConfig = smp.wrap({
            plugins:[
                new MyPlugin(),
                new MyOtherPlugin()
            ]
    });

     (2)作用:

    • 分析整个打包总耗时
    • 每个插件和loader的耗时情况

    二、webpack体积分析:webpack-bundle-analyzer

    (1)使用:构建完成后会在 8888 端口展示大小

    const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
    module.exports = {
        plugins:[
            new BundleAnalyzerPlugin()
        ]
    }

    (2)作用

    • 分析依赖的第三方模块文件大小
    • 分析业务里面的组件代码大小

     三、使用高版本的 webpack 和 Node.js

     (1)使用 webpack4:优化原因:

     四、多进程/多实例构建

     (1)资源并行解析可选方案

     

    (2) 使用 HappyPack 解析资源

     1、原理:每次 webapck 解析一个模块,HappyPack 会将它及它的依赖分配给 worker 线程中

     2、使用

     (2)使用 thread-loader 解析资源

     1、原理:每次 webpack 解析一个模块,thread- loader 会将它及它的依赖分配给 worker 线程中

     

    (3) 并行压缩

    1、使用 parallel-uglify-plugin 插件

     

     2、uglifyjs-webpack-plugin 开启 parallel 参数

     

     3、terser-webpack-plugin 开启 parallel 参数

     

     五、分包:设置 Externals

    (1)思路:将 react、react-dom 基础包通过 cdn 引入,不打入 bundle 中

    (2)方法:使用 html-webpack-externals- plugin

     

    六、预编译资源模块 

    (1)思路:将 react、react-dom、redux、react-redux 基础包和业务基础包打包成一个文件

    (2)方法:使用 DLLPlugin 进行分包,DllReferencePlugin 对 manifest.json 引用

     (3)过程

    1、新建一个配置文件

    2、 在 webpack.config.js 使用 DllReferencePlugin 引用 manifest.json

    3、引用效果

     

     七、缓存

    (1) 目的:提升二次构建速度

    (2) 缓存思路

    • babel-loader 开启缓存 
    • terser-webpack-plugin 开启缓存 
    • 使用 cache-loader 或者 hard-source-webpack-plugin

    八、 缩小构建目标

    (1)目的:尽可能的少构建模块

     九、减少文件搜索范围

    • 优化 resolve.modules 配置(减少模块搜索层级)
    • 优化 resolve.mainFields 配置(包入口文件)
    • 优化 resolve.extensions 配置(扩展名)
    • 合理使用 alias(别名路径搜索)

     

     十、图片压缩

    (1)使用:配置 image-webpack-loader

    (2)要求:基于 Node 库的 imagemin 或者 tinypng API

     

    (3) Imagemin的优点分析

    • 有很多定制选项
    • 可以引入更多第三方优化插件,例如pngquant
    • 可以处理多种图片格式

     (4)Imagemin的压缩原理

     十一、tree shaking(摇树优化)

    (1)概念

     1 个模块可能有多个方法,只要其中的某个方法使用到了,则整个文件都会被打到 bundle 里面去,tree shaking 就是只把用到的方法打入 bundle ,没用到的方法会在 uglify 阶段被擦除掉。

    (2)使用

    • webpack 默认支持,在 .babelrc 里设置 modules: false 即可
    • production mode的情况下默认开启

     (3)要求:必须是 ES6 的语法,CJS 的方式不支持

    十二、 删除掉无用的 CSS 

    • PurifyCSS: 遍历代码,识别已经用到的 CSS class
    • uncss: HTML 需要通过 jsdom 加载,所有的样式通过PostCSS解析,通过 document.querySelector 来识别在 html 文件里面不存在的选择器

     (1)使用 purgecss-webpack-pluginmini-css-extract-plugin 配合使用

     

     十三、动态 Polyfill

    (1)原因:babel-polyfill 打包后体积:88.49k,占比 29.6%

    (2) Polyfill Service原理

     识别 User Agent,下发不同的 Polyfill

     

     (3) 使用动态 Polyfill service

     十四、总结

    (1)打包速度优化

    1、使用高版本的webpack和Node.js

    2、多进程打包:happyPack或thread-loader

    3、多进程并行压缩:parallel-uglify-plugin、uglifyjs-webpack-plugin 开启 parallel 参数、terser-webpack-plugin 开启 parallel 参数

    4、预编译资源模块:DLLPlugin

    5、缓存(babel-loader、terser-webpack-plugin、cache-loader)

    6、exclude、include缩小构建目标,noParse忽略、IgnorePlugin

    7、resolve配置减少文件搜索范围(alias、modules、extensions、mainFields)

    (2)打包体积优化

    1、Tree-shaking擦除无用代码

    2、Scope Hoisting优化代码

    3、图片压缩(image-webpack-loader)

    4、公共资源提取(CommonsChunkPlugin)

    5、动态Polyfill

    6、分包设置Externals,使用 html-webpack-externals- plugin,将 react、react-dom 基础包通过 cdn 引入,不打入 bundle 中

    7、删除无用CSS代码(purgecss-webpack-plugin)

    8、JS、CSS压缩(UglifyJsPlugin(3)、terser-webpack-plugin(4)、optimize-css-assets-webpack-plugin)

    展开全文
  • 主要介绍了浅谈webpack性能榨汁机(打包速度优化),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • Webpack--打包优化

    2022-05-08 20:55:53
    HappyPack是一个通过多线程来提升webpack打包速度的工具。 工作原理 (1)在打包过程中有一项非常耗时的工作,就是使用loader将各种资源进行转译处理。最常见的包括使用babel-loader转移ES6+语法和ts-loader转移TS...

    一、HappyPack

    HappyPack是一个通过多线程来提升webpack打包速度的工具。

    • 工作原理

    (1)在打包过程中有一项非常耗时的工作,就是使用loader将各种资源进行转译处理。最常见的包括使用babel-loader转移ES6+语法和ts-loader转移TS。

    1、从配置中获取打包入口

    2、匹配loader规则,并对入口模块进行转译。

    3、对转译后的模块进行依赖查找。

    4、对新找到的模块重复2和3步骤,知道没有新的依赖模块。 

    (2)webpack是单线程的。虽然这些转译任务彼此之间没有任何依赖关系,却必须串行地执行。HappyPack恰恰以此为切入点,它的核心特性是可以开启多个线程,并行地对不同模块进行转译,这样就可以充分利用本地地计算资源来提升打包速度。

    (3)HappyPack适用于那些转译任务比较重地工程,如babel-loader和ts-loader。

    • 单个loader的优化

     要用HappyPack提供的loader来替换原有的loader,并将原有的哪个通过HappyPack插件传进去

    const HappyPack = require('happypack')
    module.exports = {
      module: {
        rules: [
          {
            test: /\.js$/,
            loader: 'happypack/loader',
            exclude: /node_modules/
          }
        ]
      },
      plugins: [
        new HappyPack({
          // 配置loader
          loaders: [{
            loader: 'babel-loader',
            options: {
              presets: ['react']
            }
          }],
        })
      ]
    }
    • 多个loader的优化 

    需要为每个loader配置一个id,否则 HappyPack 无法知道rules与plugins如何一一对应。

    const HappyPack = require('happypack')
    module.exports = {
      module: {
        rules: [
          {
            test: /\.js$/,
            loader: 'happypack/loader?id=js',
            exclude: /node_modules/
          },
          {
            test: /\.ts$/,
            loader: 'happypack/loader?id=ts',
            exclude: /node_modules/
          }
        ]
      },
      plugins: [
        new HappyPack({
          id: 'js',
          // 配置loader
          loaders: [{
            loader: 'babel-loader',
            options: {
              presets: ['react']
            }
          }],
        }),
        new HappyPack({
          id: 'ts',
          // 配置loader
          loaders: [{
            loader: 'ts-loader',
            options: {
            }
          }],
        }),
      ]
    }

    二、缩小打包作用域 

    (1)exclude和include

    (2)noParse

    有些库希望webpack完全不要去解析,即不希望应用任何loader规则,库的内部也不会有对其他模块的依赖,此时可以用noParse对其进行忽略。

    module.exports = {
      //..
      module: {
        //忽略所有文件名中包含loadsh的模块
        //这些模块仍然会被打包进资源文件,只不过webpack不会对其进行任何解析
        noParse: /loadsh/,
      }
    }

    webpack3后还支持完整的路径匹配 

    module.exports = {
      //..
      module: {
        noParse: function (fullPath) {
          //fullPath是绝对路径
          return /lib/.test(fullPath)
        }
      }
    }

     (3)IgnorePlugin

    (1)它可以完全排除一些模块,被排除的模块即便被引用了也不会被打包进资源文件中

    (2)这对于排除一些库相关文件非常有用。一些库产生的额外资源我们用不到但又无法去掉,因为引用的语句处于库文件的内部。(如Mommen.js,为了做本地化它会加载很多语言包,对于我们来说一般用不到其他地区的语言包,但他会占很多体积,这时就可以用IgnorePlugin来去掉)

    plugins:[
      new webpack.IgnorePlugin({
        //匹配资源文件
        resourceRegExp:/^\.\/locale$/,
        //匹配检索目录
        contextRegExp:/moment$/
      })
    ]

    (4)Cache

    1、有些loader会有一个cache配置项,用来在编译代码后同时保存一份缓存,在执行下一次编译前会先检查源码文件是否有变化,如果没有就直接采用缓存,也就是上次编译的结果。这样相当于实际编译的只有变化了的文件,整体速度上会有一定提升。

     2、webpack5中添加了一个新的配置项“cache:{type : "filesSystem" }”,它会在全局启用一个文件缓存(实验阶段,并且无法自动检测到缓存已过期,目前解决方法:更改后手动修改cache.version来让缓存过期)

     三、动态链接库与DllPlugin

    (1)动态链接库是早期windows系统由于受限于当时计算机内存空间较小的问题而出现的一种内存优化方法。当一段时间的子流程被多个程序调用时,为了减少内存消耗,可以将这段子程序存储为一个可执行文件,当被多个程序调用时只在内存中生成和使用同一个实例。

    (2)DllPlugin借鉴了动态链接库的这种思路,对于第三方模块或者一些不常变化的模块,可以将它们预先编译和打包,然后再项目实际构建过程中直接取用即可。

    (3)再打包vendor的时候还会附加生成一份vendor的模块清单,这份清单将会在工程业务模块打包时起到链接和索引的作用。

    (4)DllPlugin和代码分片有点类似,都可以用来提取公共模块,但本质上有一些区别。

    1、代码分片的思路是设置一些特定的规则并再打包的过程中根据这些规则提取模块;DllPlugin则是将vendor完全拆出来,有自己一整套webpack配置并独立打包,在实际工程构建时就不用再对它进行任何处理,直接取用即可。

    2、因此DllPlugin比代码分片在打包速度上更胜一筹,但也相应地增加了配置,以及资源管理地复杂度。

    • vendor配置 

    (1)需要单独创建一个webpack配置文件,如webpack.vendor.config.js。

    const path = require('path');
    const webpack = require('webpack');
    const dllAssetPath = path.join(_dirname, 'dll')
    const dllLibraryName = 'dllExample'
    module.exports = {
      entry: {
        vendor: ['react']
      },
      output: {
        path: dllAssetPath,
        filename: 'vendor.js',
        library: dllLibraryName
      },
      plugins: [
        new webpack.DllPlugin({
          //资源清单地绝对路径,业务代码打包时将会使用这个清单进行模块索引
          path: path.join(dllAssetPath, 'manifest.json'),
          //导出的 dll library 的名字,它需要与output.library的值对应
          name: dllLibraryName
        })
      ]
    };

     entry:指定了把那些模块打包为vendor

    • vendor打包

    (1)在package.js中配置一条npm script

    {
      "scripts": {
        "dll": "webpack --config webpack.vendor.config.js"
      }
    }

     (2)运行npm ruqianzn dll 后会生成一个dll目录,里面有vendor.js和manifest.json,前者包含了库的代码,后者是资源清单。

    //vendor.js
    //dllExample 在配置文件中指定的dllLibraryName
    var dllExample = (function (params) {
      //...
    }(params))
    //manifest.json
    {
      //通过DllPlugin中的name指定的
      "name": 'dllExample',
        "content": {
        "./node_modules/fbjs/lib/invariant.js": {
          "id": 0,
          "buildMeta": {
            "providedExports": true
          }
        },
        //.....
      }
    }
    • 链接到业务代码

    (1)DllReferencePlugin

    它起到一个索引和链接的作用。

    //webpack.config.js
    module.exports = {
      //...
      plugins: [
        new webpack.DllReferencePlugin({
          manifest: require(path.join(_dirname, 'dll/manifest.json')),
        })
      ]
    };
    
    //index.html
    <script src="dll/vendor.js" > </script>
    <script src="dist/app.js" > </script>

    1、当页面执行到vendor.js时,会声明DllExample全局变量。

    2、manifest相当于我们注入app.js的资源地图,app.js会先通过name字段找到名为DllExample的library,再进一步获取其内部模块。

    • 潜在问题

    1、manifest.json中每个模块都有一个id,其值是按数字顺序递增的。加入一个模块可能会导致id变化。id变化会导致hash变化,导致缓存失效。

    2、解决:配置 HashedModuleIdsPlugin

    //webpack.vendor.config.js
    module.exports = {
      //...
      plugins: [
        new webpack.HashedModuleIdsPlugin()
      ]
    };

    四、tree-shaking

    (1)作用

    1、可以再打包过程中帮助我们检测工程中没有被引用过的模块,这部分代码将永远无法被执行到,因此成为“死代码”。

    2、webpack会对这部分代码进行标记,并在资源压缩时将它们从最终的bundle中去掉。

     (2)前提条件

    1、只能对ES6 Module生效。

    2、如果我们在工程中使用了babel-loader,那么一定要通过配置来禁用它的模块依赖解析。因为如果有babel-loader来做依赖解析,webpack接收到的就都是转化过的CommonJS形式的模块,无法进行tree-shaking。

    {
      test: /\.js$/,
        use: [{
          loader: 'babel-loader',
          options: {
            presets: [
              [@babel/preset-env,{modules:false}]
            ]
          }
        }
        ]
    }

    3、使用压缩工具去除死代码

    tree-shaking本身只是为死代码加上标记,真正去除死代码的是通过压缩工具来进行的。

    4、原理

    利用ES6模块的特点:

    1、只能作为模块顶层的语句出现

    2、import的模块名只能是字符串常量

    3、import binding 是 immutable 的

    代码擦除:

    uglify阶段删除无用代码 

    展开全文
  • 由于新建项目发版打包时间大概需要 30分钟 ,发版时 严重 拖慢 下班 时间,所以特意查看了相关文档来优化打包速度,争取早点下班,^_^。 分析打包文件 要优化,先分析。我们先要知道到底是哪里拖慢我们的打包速度呢...
  • 就以限制moment中的模块为例子, 限定查找 moment/locale 上下文里符合 /zh\-mo/ 表达式的文件,因此也只会打包这几种本地化内容 new (require("webpack").ContextReplacementPlugin)( /moment[/\\]locale$/, /zh\-...
  • webpack3 打包大小优化 提高首屏加载速度、引用cdn资源,使用cdn后开发工具devtool失效处理
  • 我们想要继续提升打包速度,其实就是要提升js的打包速度,因为其他文件都比较少。 而对js文件处理主要就是eslint、babel、Terser三个工具,所以我们要提升它们的运行速度。 我们可以开启多进程同时处理js文件,这样...
  • 开发环境 采用vite 的后 ,开发启动从原来的20多s 降低到如今的 0.5 s 以内,体验棒棒的,由于各种兼容性...1. 打包速度优化 cache: { type: "filesystem", // 使用文件缓存 }, 不再需要 cache-loader。 以及。dl...
  • Webpack打包优化

    千次阅读 2022-04-17 21:20:49
    webpack打包优化分为两部分,一部分是大小优化,另一部分是速度优化。 大小优化 1.CommonsChunk 前端构建项目中,为了提高打包效率,往往将第三库与业务逻辑代码分开打包,因为第三方库往往不需要经常打包更新。...
  • 提高webpack打包速度

    2020-10-17 11:57:01
    主要讲解一些常见的提高webpack打包速度的方法供大家参考探讨~ 跟上技术的迭代 随时升级webpack及其相关管理工具的版本,包括npm,node,yarn等。 每个版本都会有优化,同时webpack建立在node环境之上,node的升级也...
  • 4.webpack4打包简单优化

    2020-09-15 10:47:29
    萌新自己学习webpack做的简单配置,如有错误请多包含,也可指点,谢谢. # noParse 内置 # 设置不去解析的包以提高性能 # IgnorePlugin 内置 # 设置不去打包对应插件内的某些文件 # DllPlugin DllReferencePlugin 内置...
  • 文档地址thread-loader · webpack 中文文档(v4.15.1) 可配选项 use: [ { loader: "thread-loader", // 有同样配置的 loader 会共享一个 worker 池(worker pool) options: { // 产生的 worker 的数量,默认...
  • webpack打包优化

    千次阅读 2021-06-04 15:42:56
    webpack打包原理 把所有依赖打包成一个 bundle.js 文件,通过代码分割成单元片段并按需加载。 webpack的优势 (1) webpack 是以 commonJS 的形式来书写脚本滴,但对 AMD/CMD 的支持也很全面,方便旧项目进行代码...
  • 合理的使用 exclude / include 可以降低使用 loader 的频率从而提高打包速度,如 exclude: /node_modules/ 因为 node_modules 中的代码是已经被转换过的代码,可以不必使用 loader 做二次转换。也即尽可能的让
  • webpack5学习(六):提升打包构建速度
  • webpack5 之 优化效率工具 ( 进度条、速度分析 、打包后提交分析)
  • 那么针对webpack的打包优化就是一件不得不做的事情了,webpack打包优化分为两部分,一部分是大小优化,另一部分是速度优化。 大小优化 1.Externals webpack 提供Externals的方法,可以通过外部引用的方法,引入第三...
  • 效果对比图: ...const webpack = require('webpack'); module.exports = { entry: { vendor: ['vue/dist/vue.esm', 'vue-router', 'axios'] //这里把vue,vue-router,axios提取出来,可以再...
  • 一,目标今天打算做一些webpack打包编译的速度优化。二,准备工作当前webpack版本 4.43.0首先,既然是做速度优化,就得先知道当前的编译速度是多少。推荐这个插件:speed-measure-webpack-pluginGitHub地址:...
  • webpack4 打包图片

    2021-01-11 17:14:37
    publicPath:'图片的公共路径' } }, 处理html文档内导入的图片 { test: /\.html$/, loader:'html-loader', 处理html文档中的img,负责引入图片,交给url-loader处理 } ] } 3、通过image-webpack-loader优化压缩图片...
  • Webpack升级4之后,小柒踩过的很多坑,这篇文章总结Webpack4的一些新特性,以及常见的优化方式。 Webpack4 新特性 不再强制需要webpack.config.js配置文件。默认入口为./src/index.js,默认输出./dist目录,输出...
  • 一、webpack 构建速度和体积优化的图片压缩、tree shaking、polyfill 图片压缩,要求是基于 Node 库的 imagemin 或者 tinypng API,使用时配置 image-webpack-loader,代码如下所示: return { test: /\.(png|svg...
  • react+webpack打包优化

    2021-06-24 10:11:15
    这是我的第一个react(17.0.2)+webpack(4.44.2)项目,开发完成后项目打包之后文件大小为11.1MB....,用这篇文章记录下打包优化过程。 代码压缩插件uglifyjs-webpack-plugin 1、插件安装 npm i -D uglifyjs-...
  • plugin 的消耗换种方式处理图片使用 DLLPlugin积极更新 webpack 版本http://www.hangge.com/blog/cache/detail_2105.html​www.hangge.comVue.js - 提高项目build打包速度webpack构建性能优化技巧汇总)Vue.js -...
  • webpack打包配置及优化

    2021-12-31 14:13:58
    webpack vue打包配置及优化 测试包 正式包 包切割
  • 本篇讲的是 Webpack 对于优化打包构建速度,也就是对于开发体验和效率的优化。 有如下几处可以优化优化 babel-loader IgnorePlugin 避免引入无用模块 noParse 避免重复打包 happyPack //多进程打包工具 ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 11,863
精华内容 4,745
热门标签
关键字:

webpack4打包速度优化