webpack 性能优化

1、提高 webpack 的打包速度

• a、跟上技术的迭代，更新 node、npm、yarn 等
• b、在尽可能少的模块上应用到 loader，减少 loader 的作用范围

rules: [
  {
    test: /\.js$/,
    /**
     * 减少该 loader 的作用范围
     * exclude 规定 webpack 打包时跳过该路径
     * 提高打包速度
     * 
     * include 规定 webpack 打包时只打包该路径
     */
    // exclude: /node_modules/,
    include: path.resolve(__dirname, '../src'),
    loader: "babel-loader"
  }
]

• c、plugins 尽量简洁并保证可靠(如开发环境不需要使用各类文件压缩插件，生产环境则需要使用各类文件的压缩插件)
• d、resolve 参数合理配置

resolve: {
  /**
   * 自动匹配 .js 结尾的文件
   * 不推荐配置太多个，一般配置 .js/.jsx/.vue 等业务文件即可
   * 不推荐配置图片/样式文件等
   */
  extensions: ['.js', '.css'],
  /**
   * 配置别名
   */
  alias: {
    '@': path.resolve(__dirname, '../src'),
    'assets': path.resolve(__dirname, '../src/assets')
  }
}

• e、使用 DllPlugin 提高打包速度
  作用：只打包一次第三方模块（生成对应的文件），业务代码使用第三方模块时，要去使用 dll 文件方式引入
  具体步骤如下：
• e-1 创建 webpack.dll.js 作为第三方插件打包一次的配置文件

const path = require('path')
const webpack = require('webpack')

module.exports = {
  mode: 'production',
  entry: {
    /**
     * 打包成一份最终文件
     */
    // vendors: [ 'jquery', 'lodash' ]
    /**
     * 打包成多份最终文件
     */
    jquery: ['jquery'],
    lodash: ['lodash']
  },
  output: {
    filename: '[name].dll.js',
    path: path.resolve(__dirname, '../dll'),
    library: '[name]'
  },
  plugins: [
    /**
     * 生成映射文件
     * 业务代码引用第三方模块时，通过 manifest.json 文件来决定
     * 到底从哪里引入，dll 还是 node_modules
     */
    new webpack.DllPlugin({
      name: '[name]',
      path: path.resolve(__dirname, '../dll/[name].manifest.json')
    })
  ]
}

• e-2 配置 package.json 的启动指令

{
  "scripts": {
    "build": "webpack --config ./build/webpack.config.js",
    "build:dll": "webpack --config ./build/webpack.dll.js"
  }
}
/* 运行指令，则会在根目录下打包生成 dll 文件夹 */

• e-3 配置生产环境/开发环境，一般写在 common 文件中即可

const path = require('path')
const fs = require('fs')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const addAssetHtmlWebpackPlugin = require('add-asset-html-webpack-plugin')
const webpack = require('webpack')

/**
 * 动态添加 dll 插件配置
 */

const dllPluginConfig = []
// 读取 dll 文件夹所有的打包文件名称
const dllHasFiles = fs.readdirSync(path.resolve(__dirname, '../dll'))
dllHasFiles.forEach(fileName => {
  if (/.*\.dll.js$/.test(fileName)) {
    dllPluginConfig.push(
      new addAssetHtmlWebpackPlugin({
        filepath: path.resolve(__dirname, `../dll/${fileName}`)
      })
    )
  }
  if (/.*\.manifest.json$/.test(fileName)) {
    new webpack.DllReferencePlugin({
      manifest: path.resolve(__dirname, `../dll/${fileName}`)
    })
  }
})

module.exports = {
  /**
   * 打包模式配置
   * development 一般为开发环境，打包的代码不压缩
   * production 一般为生产环境，打包的代码会被压缩
   */
  mode: "development",
  /**
   * 入口文件配置
   * 当前为单入口文件配置
   */
  entry: path.resolve(__dirname, '../src/main.js'),
  /**
   * 打包文件输出配置
   */
  output: {
    // 打包文件的位置
    path: path.resolve(__dirname, '../dist'),
    /**
     * 打包文件的名称
     * [name] 对应入口文件的 key 值(entrt 为对象形式下)，默认为 main
     * [hash] 当前打包的 hash 值
     * [ext] 文件的拓展名
     */
    filename: '[name].js'
  },
  resolve: {
    /**
     * 自动匹配 .js 结尾的文件
     * 不推荐配置太多个，一般配置 .js/.jsx/.vue 等业务文件即可
     * 不推荐配置图片/样式文件等
     */
    extensions: ['.js', '.css'],
    /**
     * 配置别名
     */
    alias: {
      '@': path.resolve(__dirname, '../src'),
      'assets': path.resolve(__dirname, '../src/assets')
    }
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        /**
         * 减少该 loader 的作用范围
         * exclude 规定 webpack 打包时跳过该路径
         * 提高打包速度
         * 
         * include 规定 webpack 打包时只打包该路径
         */
        // exclude: /node_modules/,
        include: path.resolve(__dirname, '../src'),
        loader: "babel-loader"
      }
    ]
  },
  /**
   * 打包时，使用到的插件
   */
  plugins: [
    /**
     * html-webpack-plugin
     * 打包时，没有配置模版时会自动生成一个 index.html 输出
     * 并自动绑定打包生成的其他静态文件
     */
    new HtmlWebpackPlugin({
      // 配置模版路径
      template: path.resolve(__dirname, '../public/index.html')
    }),
    /**
     * 避免引入多个 dll 文件时，编写太多的 new 插件
     */
    ...dllPluginConfig
  ]
}

重点在于动态添加 dll 插件配置到 dllPluginConfig 数组中
需要安装 add-asset-html-webpack-plugin 将生成的 dll 目录的所有 dll.js 文件挂载到 index.html 文件

cnpm i add-asset-html-webpack-plugin -D

• f、控制打包文件的大小
  如 tree-shaking 等

• g、合理使用 suorceMap
  在 devtool 中配置