webpack 开启gzipped_webpack gzipped - CSDN
精华内容
参与话题
  • webpack性能优化

    2019-10-04 12:14:29
    webpack相关优化 开启gzip优化。gizp是一种HTTP请求优化的方式,通过减少文件体积下载来提高加载的速度。 传送门二:https://www.jb51.net/article/148254.htm 传送门二:...

    webpack输出质量优化

    • 开启gzip优化。gizp是一种HTTP请求优化的方式,通过减少文件体积下载来提高加载的速度。
    传送门二:https://www.jb51.net/article/148254.htm
    传送门二:https://www.cnblogs.com/zs-note/p/9556390.html
    
    • 使用CDN加速静态资源加载
      用法:CDN通过将资源部署到世界各地,使得用户可以就近访问资源,加快访问速度。要接入CDN,需要把网页的静态资源上传到CDN服务上,在访问这些资源时,使用CDN服务提供的URL。
      由于CDN会为资源开启长时间的缓存,例如用户从CDN上获取了index.html,即使之后替换了CDN上的index.html,用户那边仍会在使用之前的版本直到缓存时间过期。业界做法:
      HTML文件:放在自己的服务器上且关闭缓存,不接入CDN
      静态的JS、CSS、图片等资源:开启CDN和缓存,同时文件名带上由内容计算出的Hash值,这样只要内容变化hash就会变化,文件名就会变化,就会被重新下载而不论缓存时间多长。
      另外,HTTP1.x版本的协议下,浏览器会对于向同一域名并行发起的请求数限制在4~8个。那么把所有静态资源放在同一域名下的CDN服务上就会遇到这种限制,所以可以把他们分散放在不同的CDN服务上,例如JS文件放在js.cdn.com下,将CSS文件放在css.cdn.com下等。这样又会带来一个新的问题:增加了域名解析时间,这个可以通过dns-prefetch来解决 来缩减域名解析的时间。形如**//xx.com 这样的URL省略了协议**,这样做的好处是,浏览器在访问资源时会自动根据当前URL采用的模式来决定使用HTTP还是HTTPS协议。
      总之,构建需要满足以下几点:
      静态资源导入的URL要变成指向CDN服务的绝对路径的URL
      静态资源的文件名需要带上根据内容计算出的Hash值
      不同类型资源放在不同域名的CDN上

      配置如下:
    
    const ExtractTextPlugin = require('extract-text-webpack-plugin');
    const {WebPlugin} = require('web-webpack-plugin');
    //...
    output:{
     filename: '[name]_[chunkhash:8].js',
     path: path.resolve(__dirname, 'dist'),
     publicPatch: '//js.cdn.com/id/', //指定存放JS文件的CDN地址
    },
    module:{
     rules:[{
         test: /\.css/,
         use: ExtractTextPlugin.extract({
             use: ['css-loader?minimize'],
             publicPatch: '//img.cdn.com/id/', //指定css文件中导入的图片等资源存放的cdn地址
         }),
     },{
        test: /\.png/,
        use: ['file-loader?name=[name]_[hash:8].[ext]'], //为输出的PNG文件名加上Hash值 
     }]
    },
    plugins:[
      new WebPlugin({
         template: './template.html',
         filename: 'index.html',
         stylePublicPath: '//css.cdn.com/id/', //指定存放CSS文件的CDN地址
      }),
     new ExtractTextPlugin({
         filename:`[name]_[contenthash:8].css`, //为输出的CSS文件加上Hash
     })
    
    
    • 为第三方文件单独打包,增加文件的并发下载量(对于单个域名,http)
    一:使用script引入第三方文件资源
    二:使用splitChunks来对第三方文件进行分割
    
    • :暴漏第三放文件(第三方库的使用)
    方法一:直接引用
    方法二:使用imports-loader
    方法三:直接在html模板文件中引入
    方法四:使用providePlugin
    传送门:https://www.codercto.com/a/60936.html
    
    • 打包文件分析详述
    https://javascript.ctolib.com/webpack-bundle-analyzer.html
    stat size:文件初始状态大小
    parsed size :文件解析的大小
    gzip size:文件经过压缩后的大小
    
    • 优化打包文件的体积
     对文件进行按需加载。
     比如lodash我们可能只是需要用到其中的几个方法,那么我们就可以使用import _defaults from 'lodash'
     这样文件就会显著减小
    
    • 使用Scope Hoisting
      用法:译作“作用域提升”,是在Webpack3中推出的功能,它分析模块间的依赖关系,尽可能将被打散的模块合并到一个函数中,但不能造成代码冗余,所以只有被引用一次的模块才能被合并。由于需要分析模块间的依赖关系,所以源码必须是采用了ES6模块化的,否则Webpack会降级处理不采用Scope Hoisting。
      传送门:https://blog.csdn.net/u014399368/article/details/100095919
      代码:
    const ModuleConcatenationPlugin = require('webpack/lib/optimize/ModuleConcatenationPlugin');
    //...
    plugins:[
        new ModuleConcatenationPlugin();
    ],
    resolve:{
    	mainFields:['jsnext:main','browser','main']
    }
    
    

    开发过程优化体验

    • DevServer刷新浏览器有两种方式:
      向网页中注入代理客户端代码,通过客户端发起刷新
      向网页装入一个iframe,通过刷新iframe实现刷新效果
      默认情况下,以及 devserver: {inline:true} 都是采用第一种方式刷新页面。第一种方式DevServer因为不知道网页依赖哪些Chunk,所以会向每个chunk中都注入客户端代码,当要输出很多chunk时,会导致构建变慢。而一个页面只需要一个客户端,所以关闭inline模式可以减少构建时间,chunk越多提升月明显。关闭方式:
      启动时使用webpack-dev-server --inline false
      配置 devserver:{inline:false}

    另外devServer.compress 参数可配置是否采用Gzip压缩,默认为false

    构建过程优化

    使用loader优化

    • 一:cache-loader
      用法:在一些性能开销较大的 loader 之前添加此 loader,以将结果缓存到磁盘里。】
      传送门:https://cloud.tencent.com/developer/section/1477510

    • 二:Happypack
      用法:由于有大量文件需要解析和处理,构建是文件读写和计算密集型的操作,特别是当文件数量变多后,Webpack 构建慢的问题会显得严重。
      传送门:https://juejin.im/post/5ca224f751882543d65285ed

    • 三:thread-loader
      用法:把这个 loader 放置在其他 loader 之前, 放置在这个 loader 之后的 loader 就会在一个单独的 worker 池(worker pool)中运行,请仅在耗时的 loader 上使用
      传送门:https://blog.csdn.net/a5534789/article/details/88778024,https://cloud.tencent.com/developer/section/1477543

    • 四:DLLplugin
      用法:【不重复打包第三方库,较少打包第三方库的时间,将第三方模块抽离出来】
      原理:DllPlugin动态链接库插件,其原理是把网页依赖的基础模块抽离出来打包到dll文件中,当需要导入的模块存在于某个dll中时,这个模块不再被打包,而是去dll中获取。为什么会提升构建速度呢:原因在于dll中大多包含的是常用的第三方模块,如react、react-dom,所以只要这些模块版本不升级,就只需被编译一次。我认为这样做和配置resolve.alias和module.noParse的效果有异曲同工的效果。
      传送门:https://www.jb51.net/article/142761.htm,https://segmentfault.com/a/1190000018820505

    使用plugin优化

    • webpack-parallel-uglify-plugin
      用法:使用UglifyJS插件压缩JS代码时,需要先将代码解析成Object表示的AST(抽象语法树),再去应用各种规则去分析和处理AST,所以这个过程计算量大耗时较多。ParallelUglifyPlugin可以开启多个子进程,每个子进程使用UglifyJS压缩代码,可以并行执行,能显著缩短压缩时间。JS中的whappyPack
      传送门

    webpack内部语法优化

    • 一:module.noParse
      用法:告诉webpack某些库中并没有引入其他的文件,不需要再去解析
      传送门

    搜索过程优化

    • 一:resolve.modules:[path.resolve(__dirname, ‘node_modules’)]
      用法:避免webpack层层去查找webpack模块,resolve.modules告诉webpack去哪些目录下寻找第三方模块,默认值为[‘node_modules’],会依次查找./node_modules、…/node_modules、…/…/node_modules。
      传送门一
      传送门二

    • 二:resolve.mainFields:[‘main’]
      用法:设置尽量少的值可以减少入口文件的搜索步骤,第三方模块为了适应不同的使用环境,会定义多个入口文件,mainFields定义使用第三方模块的哪个入口文件,由于大多数第三方模块都使用main字段描述入口文件的位置,所以可以设置单独一个main值,减少搜索。
      传送门一
      传送门二

    • 三:resolve.alias
      用法:使webpack直接使用库的min文件,避免库内解析,这样会影响Tree-Shaking,适合对整体性比较强的库使用,如果是像lodash这类工具类的比较分散的库,比较适合Tree-Shaking,避免使用这种方式。
      传送门一
      传送门二

    • 四:resolve.extensions
      用法:默认值:extensions:[’.js’, ‘.json’],当导入语句没带文件后缀时,Webpack会根据extensions定义的后缀列表进行文件查找,所以:

    列表值尽量少
    频率高的文件类型的后缀写在前面
    源码中的导入语句尽可能的写上文件后缀,如require(./data)要写成require(./data.json)
    

    otherTip

    配置babel-loader时,use: [‘babel-loader?cacheDirectory’] cacheDirectory用于缓存babel的编译结果,加快重新编译的速度。另外注意排除node_modules文件夹,因为文件都使用了ES5的语法,没必要再使用Babel转换。

    配置externals,排除因为已使用

    配置performance参数可以输出文件的性能检查配置。

    配置profile:true,是否捕捉Webpack构建的性能信息,用于分析是什么原因导致构建性能不佳。

    配置cache:true,是否启用缓存来提升构建速度。

    可以使用url-loader把小图片转换成base64嵌入到JS或CSS中,减少加载次数。

    通过imagemin-webpack-plugin压缩图片,通过webpack-spritesmith制作雪碧图。

    开发环境下将devtool设置为cheap-module-eval-source-map,因为生成这种source map的速度最快,能加速构建。在生产环境下将devtool设置为hidden-source-map

    展开全文
  • vue-cli webpack打包开启Gzip时报错

    千次阅读 2018-11-15 16:46:35
    前言 今天看了一下Vue-cli中webpack打包的速度,有点小慢,于是我就开始使用其自带的productionGzip功能。 说明:本人用的node版本:v6.11.3,npm版本:v...1. 首先打开config/index.js,找到build对象中的produc...

    前言

    今天看了一下Vue-cli中webpack打包的速度,有点小慢,于是我就开始使用其自带的productionGzip功能。

    说明:本人用的node版本:v6.11.3,npm版本:v3.10.10,webpack版本:3.6.0,Vue版本:2.5.2,以免后期版本升级更新造成误导。

    下面进入正文。

    1. 首先打开config/index.js,找到build对象中的productionGzip,改成true

    2. 打开productionGzip: true之前,先要安装依赖compression-webpack-plugin,官方推荐的命令是:

    1
    
    npm install --save-dev compression-webpack-plugin

    这个命令的意思是安装最新版的compression-webpack-plugin,安装好之后,然后我运行npm run build打包,结果报错如下图:

    排查了一会儿原因,然后我去看了下:https://www.npmjs.com/package/compression-webpack-plugin。在其文档中发现了些细节, Requirements:This module requires a minimum of Node v6.9.0 and Webpack v4.0.0.

    而且当前最新版的compression-webpack-plugin2.0.0版本。我猜想就是版本太高了导致的,然后我做了以下操作:

    1. 卸载之前的compression-webpack-plugin安装包,执行命令:

    1
    
    npm uninstall --save-dev compression-webpack-plugin

    2. 重新安装1.1.11版本,执行命令:

    1
    
    npm install --save-dev compression-webpack-plugin@1.1.11

    3. 等安装好之后,重新运行命令:

    1
    
    npm run build

    结果果然不出意料,成功了~ ?

    本次采坑之旅还算顺利,特此记录一下。

    展开全文
  • 开启gzip压缩 1,安装gzip的webpack插件 yarn add compression-webpack-plugin 2,在umirc.ts中写入如下配置 //引入 const CompressionPlugin = require("compression-webpack-plugin"); const ...

    开启gzip压缩

    1,安装gzip的webpack插件

    yarn add compression-webpack-plugin
    

    2,在umirc.ts中写入如下配置

    //引入
    const CompressionPlugin = require("compression-webpack-plugin");
    const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i;
    export default defineConfig({
    	...
    	chainWebpack(memo){
    	    memo.plugin('CompressionPlugin').use(new CompressionPlugin({
    	      filename: "[path].gz[query]",
    	      algorithm: "gzip",
    	      test: productionGzipExtensions,
    	      // 只处理大于xx字节 的文件,默认:0
    	      threshold: 10240,
    	      // 示例:一个1024b大小的文件,压缩后大小为768b,minRatio : 0.75
    	      minRatio: 0.8, // 默认: 0.8
    	      // 是否删除源文件,默认: false
    	      deleteOriginalAssets: false
    	    }));
    	  }
      })
    

    开启去掉console.log

    1,安装

    yarn add babel-plugin-transform-remove-console
    

    使用

    //判断只有在生产模式才开启
    const IS_PROD = ["production", "prod"].includes(process.env.NODE_ENV);
    export default defineConfig({
    	extraBabelPlugins:[
        IS_PROD?'transform-remove-console':""
      ],
    })
    
    展开全文
  • vue cli3.x 开启gzip,优化速度

    千次阅读 2019-10-18 17:54:29
    gizp压缩是一种http请求优化方式,通过减少文件体积来提高加载速度,对于用户量多的网站,开启gizp压缩会大大降低服务器压力,提高加载速度,降低服务器流量成本 安装compression-webpack-plugin cnpm install ...

    gizp压缩是一种http请求优化方式,通过减少文件体积来提高加载速度,对于用户量多的网站,开启gizp压缩会大大降低服务器压力,提高加载速度,降低服务器流量成本

    安装compression-webpack-plugin

    cnpm install compression-webpack-plugin --save-dev

    vue.config.js配置Gzip压缩

    // 导入compression-webpack-plugin
    const CompressionWebpackPlugin = require('compression-webpack-plugin');
    // 定义压缩文件类型
    const productionGzipExtensions = ['js', 'css']
    
    module.exports = {
         //统一配置打包插件
        configureWebpack: {
            plugins: [
                new CompressionWebpackPlugin({
                    filename: '[path].gz[query]',
                    algorithm: 'gzip',
                    test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),//匹配文件名
                    threshold: 10240,//对10K以上的数据进行压缩
                    minRatio: 0.8,
                    deleteOriginalAssets:false,//是否删除源文件
                })
            ]
        },
    }

    npm run build 之后,对比之前的文件,平均压缩了5到5倍左右

    nginx配置gizp

    	gzip on; #开启或关闭gzip on off
    	gzip_min_length 5k; #gzip压缩最小文件大小,超出进行压缩(自行调节)
    	gzip_buffers 4 16k; #buffer 不用修改
    	gzip_comp_level 8; #压缩级别:1-10,数字越大压缩的越好,时间也越长
    	gzip_types text/plain application/x-javascript application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png; #  压缩文件类型 
    	gzip_vary on; # 和http头有关系,加个vary头,给代理服务器用的,有的浏览器支持压缩,有的不支持,所以避免浪费不支持的也压缩,所以根据客户端的HTTP头来判断,是否需要压缩

    修改后记得执行 nginx -s reload 

    一般浏览器都已支持.gz的资源文件,在http请求的Request Headers 中能看到 Accept-Encoding:gzip

    展开全文
  • 最近做公司项目,用webpack 打包发现输出的bundle.js文件体积超大,9M多。查阅相关博客,最后处理得到的bundle.js压缩到202k。由于目前用的webpack是4.10.2, 在处理过程中,也遇到了关于webpack版本的一些坑。根据...
  • 查看 webpack 打包后所有组件与组件间的依赖关系,针对多余的包文件过大,剔除首次影响加载的效率问题进行剔除修改,本次采用的是 ==webpack-bundle-analyzer==(可视化视图查看器)== 介绍1:webpack-bundle-...
  • 一、命令行安装compression-webpack-plugin npm i -D compression-webpack-plugin 二、在 vue.config.js 里面配置compression-webpack-plugin,如果没有vue.config.js则在项目根目录创建vue.config.js "use ...
  • 应用场景:项目使用webpack2.x进行打包,打包后静态资源通过nginx转发配置: 问题:webpack打包后的资源文件特别,特别大,没打包之前页面一个页面js有2M左右(其中已经抽离了css)? 优化一:一看js这么大肯定是...
  • npm intall webpack-bundle-analyzer –save-dev 二、配置 在build/webpack.prod.config.js中的module.exports = webpackConfig这句话的上面增加 if (config.build.bundleAnalyzerReport) { const ...
  • umi配置gzip

    2020-08-26 22:26:10
    yarn add compression-webpack-plugin -D 2.config/config.js文件中添加配置 const CompressionWebpackPlugin = require('compression-webpack-plugin'); const prodGzipList = ['js', 'css']; chainWebpack: ...
  • react 打包优化,开启gzip压缩

    千次阅读 2020-08-10 13:40:28
    react官方脚手架默认是将webpack配置隐藏起来了,在进行配置之前需要将webpack给暴露出来。 1.输入命令 npm run eject 会出现一个命令提示:这是一个单向操作,确认操作后不可逆转/返回? 输入 y 回车 成功之后 在...
  • 我们使用 compression-webpack-plugin 插件进行压缩。 npm install compression-webpack-plugin --save-dev 成功之后,在vue-config.js里配置 const CompressionPlugin = require("compression-webpack-plugin")...
  • webpack 性能调优与 Gzip 原理

    千次阅读 2019-01-12 19:37:48
    从本节开始,我们进入网络层面的性能优化世界。 大家可以从第一节的示意图中看出,我们从输入 URL 到显示页面这个过程中,涉及到网络层面的,有三个主要过程: DNS 解析 TCP 连接 ... 对于 DNS 解析和 TCP 连接两个...
  • vue 进行gzip压缩的踩坑之路

    千次阅读 2018-11-07 17:27:10
    最近使用vue做了一个项目,项目完成后需要上传到服务器,结果打开服务器的项目时,页面等了13s才打开,这才发现项目打包后的其中一个js文件大小达到1.2m,所以赶紧进行压缩,这里我用到了gzip。 一、下载压缩插件 ...
  • 项目常用webpack配置

    2019-12-13 09:39:57
    1.分析工具:webpack-bundle-analyzer "scripts": { "serve": "vue-cli-service serve", "build:dev": "vue-cli-service build --mode dev", "build:test": "vue-cli-service build --mode test", "b...
  • Wepack4之后废弃了很多的插件,这里只会讲解webpack4还支持的(包含4之前插件),已经废弃的将不再阐述。 mini-css-extract-plugin css-提取,看名字就懂提取css用的。 在这之前我们可能会使用extract-text-...
  • vue-cli3.0配置GZIP压缩

    千次阅读 2019-02-26 23:47:24
    当项目中引用很多第三方插件时,打包后vendors会变得非常大,网站打开速度变得非常慢。这时使用GZIP压缩可以大幅减小打包后文件的体积。首先需要安装compression-webpack-pluginnpm install compression-webpack-...
  • Vue-Cli4.0 开启gzip压缩

    2020-09-22 16:57:29
    1、首先安装compression-webpack-plugin npm install compression-webpack-plugin --save -dev 2、在Vue.config.js文件中配置: const CompressionWebpackPlugin = require('compression-webpack-plugin') ...
  • 之前尝试过一些在webpack3的基础上做的构建优化,例如引入HappyPack优化构建速度,开启loader缓存和优化包查找路径等等,详情可以查看前端webpack构建优化 但是随着时间的推移,这种优化产生的效果越来越弱化,手上...
  • 前端性能优化【vuecli3开启gzip压缩】

    千次阅读 2019-07-20 10:28:30
    cnpm install compression-webpack-plugin -D 2.修改vue.config.js const CompressionPlugin = require("compression-webpack-plugin") module.exports = { configureWebpack: { plugins: [ ...
1 2 3 4 5
收藏数 82
精华内容 32
关键字:

webpack 开启gzipped