webpack打包体积优化

webpack打包的体积越小,对于部署应用的网站来说,性能越好,加载速度越快。

1. 分析打包文件

1. 生成统计信息文件

首先需要通过webpack命令生成统计信息的文件。在package.json的脚本中添加命令

  "scripts": {
    "stats": "webpack --config webpack.prod.js --profile --json > stats.json",
     //...
  }

上面的命令会在根目录下生成一个stats.json的打包统计信息文件。

2. 可视化分析

使用插件可视化分析插件:webpack-bundle-analyzer

npm install --save-dev webpack-bundle-analyzer

配置插件的使用信息;

const BundleAnalyzerPlugin = require(‘webpack-bundle-analyzer‘).BundleAnalyzerPlugin;

module.export = {
   //...
  plugins: [
    new BundleAnalyzerPlugin({
      analyzerMode: ‘disabled‘,  // 关闭默认启动的展示信息的http服务器
      generateStatsFile: true  // 打包的时候生成stats.json文件;
  }),
}

从上面配置信息可知,使用该插件,不需要再手动生成stats.json文件,第一步可以省略。

然后,在脚本中添加手动启动分析器的http

// 分析命令的使用,应该在打包命令之后。因为它的作用就是分析打包后的文件
 "scripts": {
    "build": "webpack --config webpack.prod.js",
    "analyzer": "webpack-bundle-analyzer ./dist/stats.json --port 8081"
  }

3. 优化建议

将生成的stats.json文件拖入该网站https://webpack.jakoblind.no/optimize/

会给出打包体积太大的优化措施。

该插件基于webpack-optimize-helper插件。

2. 抽离css并压缩

1.抽离css

使用mini-css-extract-plugin抽离css

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

在plugins配置文件中使用插件

module.exports = {
  plugins: [
    new MiniCssExtractPlugin({
      filename: ‘css/[name].[contenthash:8].css‘  // 将css文件统一放入css文件夹
    })
  ]
}

2. 压缩css

使用optimize-css-assets-webpack-plugin压缩css文件

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

在optimization中使用该插件

module.exports = {
    optimization: {
        minimize: true,
        minimizer: [
            new OptimizeCssAssetsWebpackPlugin()
        ]
    }    

3. 移除未使用的css

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

使用purgecss-webpack-plugin移除未使用的css样式。

npm i purgecss-webpack-plugin -D

在pluigns中配置插件

const glob = require(‘glob‘); // 根据路径查找文件
module.exports = {  plugins:[
    new PurgecssWebpackPlugin({ //paths要求是绝对路径
      paths: glob.sync(`${path.join(__dirname, ‘src/**/*‘)}`, { nodir: true })
    })  ]

3. 复用babal转化时runtime代码

@babel/plugin-transform-runtime

?该插件的引入只能通过.babelrc文件,不能在babel-loader的options中,否则报错。

4. 使用CDN

1. 第三方库使用CDN

    new HtmlWebpackExternalsPlugin({
      externals: [
        {
          module: ‘lodash‘,
          global: ‘_‘,
          entry: ‘https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js‘
        }
      ]
    })

然后为了避免用户在模块中手动又导入,需要添加

  externals: {
    lodash: ‘_‘
  },

2. 项目生成的静态文件可以部署到CDN服务器中

需要配置publicPath为CDN服务器的域名

// output, module->MiniCssWebpackLoader.loader,  image等可以部署publicPath
publicPath: ‘http://lyralee.com‘

5. webpack.IgnorePlugin

忽略第三方库中多余的文件夹。

new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)

上面忽略了moment库中的语言包

6. 图片压缩image-webpack-loader

      {
        test: /\.(gif|png|jpe?g|svg)$/i,
        use: [
          {
            loader: ‘url-loader‘,
            options: {
              limit: 2 * 1024,
              outputPath: ‘images‘,
              name: ‘[name].[contenthash:8].[ext]‘
            }
          },
          {
            loader: ‘image-webpack-loader‘,
            options: {
              mozjpeg: {
                progressive: true,
                quality: 65
              },
              // optipng.enabled: false will disable optipng
              optipng: {
                enabled: false
              },
              pngquant: {
                quality: [0.65, 0.90],
                speed: 4
              },
              gifsicle: {
                interlaced: false
              },
              // the webp option will enable WEBP
              webp: {
                quality: 75
              }
            }
          }
        ]
      }

7. 使用babel-polyfill的替代方案

如果项目中允许使用外部链接,可以使用

<script src="https://polyfill.io/v3/polyfill.min.js/"></script>

它按照浏览器类型返回需要的内容

8. TreeShaking

1. 原理:

1)利用es6模块的静态结构,依赖模块命令import/export,进行代码分析,分析出无用/永远不会访问的代码。

1)对于自己写的代码,禁止babel将esModule转为require
rules: [
      {
        test: /\.jsx?$/,
        use: {
          loader: ‘babel-loader‘,
          options: {
            // 设置{moduels: false} 则保留ES6的import/export
            presets: [[‘@babel/preset-env‘, {modules: false}],  ‘@babel/preset-react‘],
            plugins: [
              [‘@babel/plugin-proposal-decorators‘, {legacy: true}],
              [‘@babel/plugin-proposal-class-properties‘, {loose: true}]
            ]
          },
        },
        exclude: /node_modules/
      }
    ]
2) 对于第三方库,要使用es模块的包, 如: lodash-es(有问题,先不用)
import {join } from ‘lodash-es‘

2)通过terser-webpack-plugin移除分析出的多余代码

// ??只要写了optimization属性(即使是空),即使是production,也不会启动该Terser插件 ; 如果是完整的配置,但是mode=development,该属性也不起作用
optimization: {
    minimizer: [
      new TerserWebpackPlugin({
        parallel: true,
        cache: true
      })
    ],
     ...
  },

2. 注意事项

1. 要使TreeShaking起作用,必须使用ES6语法import/export
2. 减少sideEffects(副作用)代码的书写
3. 引入的第三方库,需要引入他们的ES版本

3. 特殊情形

当多入口文件存在时,只要有一个入口中使用了某方法,就不会被TreeShaking掉

9. 代码分割

1. 入口文件代码分割

entry: {
    index: ‘./src/index.js‘,
    vendors: [‘lodash‘]
}

2. 动态import导入实现懒加载

当代码中触发使用import()动态引入文件时,会发起请求,并返回一个webpackJsonp方法,

该方法中实现代码的按需加载。

另外,React16.6.0中引入的React.lazy()就是基于该方法实现模块的代码分割和懒加载。

3. 使用splitChunks插件

splitChunks: {
      cacheGroups: {
        vendors: {
          chunks: ‘initial‘, // 还有aysnc/all模式
          name: ‘vendors‘, // 覆盖默认生成的名字
          test: /node_modules/,
          priority: -10, //优先级
          minSize: 100*1024  // 生成单独文件的最小体积
        },
        commons: {
          chunks: ‘initial‘,
          name: ‘commons‘,
          priority: -10,
          minChunks: 2, // 被引用的模块的最少数量
          minSize: 50*1024
        }
      }
    }

原文地址:https://www.cnblogs.com/lyraLee/p/12031076.html

时间: 2024-11-13 08:59:50

webpack打包体积优化的相关文章

Webpack打包体积与速度优化

webpack打包时会将所有的依赖的第三方库打包在vendor文件中,当依赖的库比较多时,会导致vendor文件体积很大. 几种优化方式: 1.将不常变动的第三方库使用cdn的方式引入,写在script标签中,并且在webpack的配置文件中,配置external,webpack在打包的时候就不会打包进去. 2.dllplugin,将不经常变化的框架打包到dll中. 3.使用splitchunks进行代码的拆分. 打包速度方面的优化: 1.webpack默认使用uglify进行打包,是单线程的打

Webpack打包效率优化篇

Webpack基础配置: 语法解析:babel-loader 样式解析:style-loader css解析:css-loader less解析:less-loader 文件解析:url-loader(file-loalder) 性能分析:webpack-bundle-analyzer 代码: var path = require('path'); var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyz

webpack打包性能优化

1. 使用 gzip 压缩打包后的 js 文件 这个方法优化浏览器下载时的文件大小(打包后的文件大小没有改变) webpack.config.prod.js 中 var CompressionWebpackPlugin = require('compression-webpack-plugin'); // 在 pligins 中添加 new CompressionWebpackPlugin({ //gzip 压缩 asset: '\[path\].gz\[query\]', algorithm:

vue打包体积优化之旅

webpack 与 vue 在使用vue开发时,遇到打包后单个文件太大,因而需要分包,不然加载时间太久.虽然尽可能减少请求次数,但是单个包太大也不是好事 思路 组件按需加载 vue-router 的懒加载 第三方包分离 代码分割时, 组件按需加载 现在ui库大多都是以组件的形式进行处理,因而不用将整个库都导入,只需导入想要的即可 根据对应库的文档进行操作即可,现在每个库都有对应的使用流程,及相关配置,并不是很难 只是在导入css样式时依旧需要全部导入(目前只能如此) vue-router 懒加载

[转] Webpack 打包优化之体积篇

谈及如今欣欣向荣的前端圈,不仅有各类框架百花齐放,如Vue, React, Angular等等,就打包工具而言,发展也是如火如荼,百家争鸣:从早期的王者Browserify, Grunt,到后来赢得宝座的 Gulp, 以及独树一帜的 fis3, 以及下一代打包神器 Rollup :在 browserify,grunt,gulp,rollup,webpack 可以一窥其中部分对比.在本文要探究的是,当前打包工具绝对霸者 Webpack. Webpack Package optimization W

Webpack 打包优化之体积篇

谈及如今欣欣向荣的前端圈,不仅有各类框架百花齐放,如Vue, React, Angular等等,就打包工具而言,发展也是如火如荼,百家争鸣:从早期的王者Browserify, Grunt,到后来赢得宝座的 Gulp, 以及独树一帜的 fis3, 以及下一代打包神器 Rollup :在 browserify,grunt,gulp,rollup,webpack 可以一窥其中部分对比.在本文要探究的是,当前打包工具绝对霸者 Webpack. Webpack Package optimization W

(webpack系列二)webpack打包优化探索

虽然webpack的已经升级到了webpack4,而我们目前还在使用webpack3,但其中的优化点都大同小异,升级后同样适用. 性能优化初步原则 减小代码量 减小请求数 最大化利用浏览器缓存 这三条原则永远是一切优化的前提 优化配置 升级webpack 3,优化js的编译能力(Scope Hoisting) 1// 主要配置2plugins:[3  new webpack.optimize.ModuleConcatenationPlugin()4] 合理规划 entry 入口配置(平衡vend

webpack打包经验——处理打包文件体积过大的问题

前言 最近对一个比较老的公司项目做了一次优化,处理的主要是webpack打包文件体积过大的问题. 这里就写一下对于webpack打包优化的一些经验. 主要分为以下几个方面: 去掉开发环境下的配置 ExtractTextPlugin:提取样式到css文件 webpack-bundle-analyzer:webpack打包文件体积和依赖关系的可视化 CommonsChunkPlugin:提取通用模块文件 提取manifest:让提取的公共js的hash值不要改变 压缩js,css,图片 react-

基于CommonsChunkPlugin,webpack打包优化

前段时间一直在基于webpack进行前端资源包的瘦身.在项目中基于路由进行代码分离,http://www.cnblogs.com/legu/p/7251562.html.但是打包的文件还是很大,特别是通过CommonsChunkPlugin的async:true打包的chunk的公共包不可控.今天就通过CommonsChunkPlugin插件的理解,来优化这个问题 问题描述详细些,我们的打包是基于router进行的chunk分割,比如router有10个,router1,router2用到了ec