webpack系列 —— 性能优化篇

一 压缩图片和css

压缩图片

1. image-webpack-loader 来压缩图片文件

// image-webpack-loader 使用 imagemin 来进行压缩
use: [
    'file-loader', // 需要在file-loader之后添加 image-webpack-loader
    {
      loader:  'image-webpack-loader',
        options: {
            // 压缩 jpg
            mozjpeg: {
              progressive:  true,
            },
            // 压缩 png
            optipng: {
              enabled:  false,  // 可以使用enabled：false来禁用优化器
            },
            // 压缩 png
            pngquant: {
              quality: [0.65, 0.90], // 达到或超过最大质量所需的最少颜色数量
              speed:  4
            },
            // 压缩 gif
            gifsicle: {
              interlaced:  false, // 渐进式渲染
            },
            // 压缩 jpg 和 png为 webp
            webp: {
              quality:  75 // 压缩质量
            }
         }
    }
]

需要注意的是：

1. image-webpack-loader 需要在 file-loader 之后添加
2. 默认情况下会自动启用
   jpg、png、gif、svg的优化器

压缩前后文件对比：
压缩前：

压缩后：

2. 使用 url-loader 将小图片转换为 base64 编码

{
    test: /.(png|jpg|gif)$/, 
    use: [{
           loader: 'url-loader', 
           options: {
             limit: 8 * 1024, // 单位是 Byte，当文件小于 8KB 时作为 DataURL 处理 
           }
         }]
}

压缩 css 代码

1. optimize-css-assets-webpack-plugin

const  OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
plugins: [
  new  OptimizeCssAssetsWebpackPlugin(),
]

二 优化 js代码

Tree Shaking 移除未引用的代码
使用前提：

1. 使用 es6模块化（因为es6模块化语法是静态的，可以使webpack分析出哪些是需要被剔除的代码。 ）

import { A } from './index.js' 
export function A() { ... }

1. 开启production环境

module.exports = {
  entery: '',
  output: {},
  module: {},
  plugins: [],
  mode: 'production',
}

如何配置 webpack 可以使 tree shaking生效？
3. 配置 babel，保留es6模块化语句。

{
    "presets": [
      [
        "env",
          {
            "modules": false  // 关闭 babel 的模块化转换功能，保留原本的es6模块语法
          }
      ]
    ]
}

1. UglifyJs 代码压缩工具 ，帮忙剔除无用的代码
   通过分析 js 语法树，从而去掉无效代码，去掉console代码，缩短变量名等。
   插件：uglifyjs-webpack-plugin

const  UglifyJsPlugin = require('uglifyjs-webpack-plugin');
    optimization: {
      minimizer: [
        new  UglifyJsPlugin({
             test: /\.js(\?.*)?$/i,
             parallel:  true, // 使用多进程并行运行以提高构建速度
             sourceMap:  true, 
             uglifyOptions: {
                warnings:  false,
                parse: {},
             },
        }),
    ]
}

分离代码文件
分离css文件
css-loader 会把样式字符串存储到js文件中，style-loader 会把样式字符串添加到style标签中。

这样会使js文件比较大，影响加载速度。所以我们需要把js中的css文件分离出来，css文件单独打包，并引入到html中。

• 安装 mini-css-extract-plugin 插件

 npm install mini-css-extract-plugin -D

• 修改配置

module: {
   rules: [
   {
       test: /\.css$/,
       use: [
           MiniCssExtractPlugin.loader,
           { loader: "css-loader" }
       ]
   }
},
plugins: [
   new  MiniCssExtractPlugin({ // 压缩打包css 文件插件
   filename:  "css/\[name\].css"  // 打包后最终生成的 dist 文件里面的 打包后的 css 文件
})]

如何实现动态加载？

1. import(/* webpackChunkName: “show” */ ‘./show’)

index.js的代码：

document.getElementById('btn').addEventListener('click', function(){
    import(/* webpackChunkName: "show" */  './show').then(show => {
        show.default('webpack')
     })
})


show.js 的代码：
module.exports = function(content) {
    alert('hello'\+ content);
}

1. /* webpackChunkName: “show” */ 是为动态生成的 chunk 指定一个名字, 同时还需要在 webpack.config.js 配置。

output: {
    filename:  'build.js',
    path:  resolve(__dirname, 'build'), // 通常写一个绝对路径
    chunkFilename:  '[name].js' // 为动态加载的 chunk 配置文件名称
},

如果不加 chunkFilename: ‘[name].js’ 的配置，chunk的文件名称将会是 [id].js

webpack 遇到 import(*) 的语句时的处理过程

1. 以 ./show.js 为入口，重新生成一个chunk
2. 当代码执行到 import 的时候，加载第一步生成的文件。
3. import 返回一个Promise， 可以在 then 函数中获取到 show.js 导出的内容

由于 import 返回 Promise，所以在一些不支持 Promise 的浏览器中，需要 Promise polyfill的支持。